vue实现get下载

使用 Vue 实现 GET 下载

方法一：通过 window.open 直接下载

直接通过 window.open 打开下载链接，适用于简单的文件下载场景。

downloadFile() {
  const url = 'https://example.com/file.pdf';
  window.open(url, '_blank');
}

方法二：使用 axios 发送 GET 请求

通过 axios 发送 GET 请求获取文件流，并使用 Blob 对象创建下载链接。

import axios from 'axios';

downloadFile() {
  axios({
    url: 'https://example.com/file.pdf',
    method: 'GET',
    responseType: 'blob',
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
}

方法三：处理带认证的下载

如果下载接口需要认证（如 Token），可以在请求头中添加认证信息。

downloadFileWithAuth() {
  const token = localStorage.getItem('token');
  axios({
    url: 'https://example.com/protected-file.pdf',
    method: 'GET',
    responseType: 'blob',
    headers: {
      'Authorization': `Bearer ${token}`
    }
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'protected-file.pdf');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
}

方法四：处理后端返回的文件名

如果后端在响应头中返回文件名，可以通过解析 content-disposition 获取。

downloadFileWithDynamicName() {
  axios({
    url: 'https://example.com/dynamic-file',
    method: 'GET',
    responseType: 'blob',
  }).then(response => {
    const contentDisposition = response.headers['content-disposition'];
    const fileName = contentDisposition.split('filename=')[1];
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
}

方法五：通过 fetch 实现下载

如果不使用 axios，可以通过原生 fetch 实现下载。

downloadWithFetch() {
  fetch('https://example.com/file.pdf')
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'file.pdf');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
}

注意事项

• 确保后端接口支持跨域请求（CORS），否则下载可能失败。
• 如果文件较大，可以添加加载提示以改善用户体验。
• 下载完成后，记得释放 Blob URL 以避免内存泄漏。

// 释放 Blob URL
window.URL.revokeObjectURL(url);

以上方法涵盖了 Vue 中实现 GET 下载的常见场景，可以根据实际需求选择合适的方式。