vue根据文件流或者url进行下载

240 阅读1分钟

// 引入 Axios
import axios from 'axios'; // 或者通过其他方式引入
// 下载数据流 需配置 响应头(responseType: 'blob'),下面axios也有示例  
// 下载数据的通用函数,使用 Axios
function downloadData(source, fileName, downloadType) {
  if (downloadType === 'blob') {
    // 下载 Blob 数据流
    const blobData = new Blob([source], { type: source.type || 'application/octet-stream' });

    if (navigator.msSaveBlob) {
      // 兼容IE的下载方式
      navigator.msSaveBlob(blobData, fileName);
    } else {
      // 创建下载链接并模拟点击下载
      const url = window.URL.createObjectURL(blobData);
      const a = document.createElement('a');

      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();

      // 释放URL对象
      window.URL.revokeObjectURL(url);
    }
  } else if (downloadType === 'url') {
    // 下载远程URL地址的数据
    axios({
      url: source,
      method: 'GET',
      responseType: 'blob' // 以二进制流形式接收响应数据
    })
      .then(response => {
        // 创建 Blob 对象,并设置 MIME 类型
        const blobData = new Blob([response.data], { type: response.headers['content-type'] || 'application/octet-stream' });

        if (navigator.msSaveBlob) {
          // 兼容IE的下载方式
          navigator.msSaveBlob(blobData, fileName);
        } else {
          // 创建下载链接并模拟点击下载
          const url = window.URL.createObjectURL(blobData);
          const a = document.createElement('a');

          a.href = url;
          a.download = fileName;
          document.body.appendChild(a);
          a.click();

          // 释放URL对象
          window.URL.revokeObjectURL(url);
        }
      })
      .catch(error => {
        console.error('下载出错:', error);
      });
  }
}
export default downloadData;
// 使用示例
// const localBlob = new Blob(['Blob binary data'], { type: 'application/octet-stream' });
// const remoteUrl = 'https://example.com/your-data-url';

// 下载 Blob 数据流
// downloadData(localBlob, 'local-data-file.extension', 'blob');

// 下载远程URL地址的数据
// downloadData(remoteUrl, 'remote-data-file.extension', 'url');