js/vue 下载二进制文件流

sylvia_0815

已于 2022-07-23 09:55:15 修改

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 笔记文章标签： vue js javascript

于 2021-07-28 14:38:04 首次发布

本文章版权只限本人所有

本文链接：https://blog.youkuaiyun.com/sylvia_0815/article/details/119178970

笔记同时被 2 个专栏收录

58 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文介绍了在Vue中如何实现二进制文件的下载，包括Excel和Zip文件。通过axios进行API调用，设置响应类型为'blob'，然后利用Blob对象和URL.createObjectURL方法创建下载链接，最后通过a标签模拟点击实现文件下载。同时，提供了用户取消下载的功能和文件命名的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单来说下载二进制文件流就是将二进制文件流存在 Blob 对象中，再将其转为 url 对象，最后通过 a 标签下载。

//封装下载
export function downLoadFetch(url, params = {}, config={}) {
    //取消
    const downSource = axios.CancelToken.source();
    document.getElementById('downAnimate').style.display = 'block';
    document.getElementById('cancelBtn').addEventListener('click', function(){
        downSource.cancel("用户取消下载");
        document.getElementById('downAnimate').style.display = 'none';
    }, false);
    //参数
    config.params = params;
    //超时时间
    config.timeout = config.timeout ? config.timeout : defaultDownConfig.timeout;
    //类型
    config.responseType = defaultDownConfig.responseType;
    //取消下载
    config.cancelToken = downSource.token;
    return instance.get(url, config).then(response=>{
        const content = response.data;
        const url = window.URL.createObjectURL(new Blob([content]));
        //创建 a 标签
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        //文件名  Content-Disposition: attachment; filename=download.txt
        const filename = response.headers['content-disposition'].split(";")[1].split("=")[1];
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        return {
            status: 200,
            success: true
        }
    })
}

vue写法

下载excel

// 下载学生列表
    down_list(){
      let data = {}
      let that = this
      schoolClass_exportStudentData(data).then(res =>{
        if (res.data) {
          const url = window.URL.createObjectURL(new Blob([res.data]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          const fileName = '这就是列表名字' + '.' + 'xls'
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        } else {
          that.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      })
    },
    // 下载
    down_list_btn(){
      this.down_list()
    },


 // 封装请求的地方需要这么写：
 export function schoolClass_exportStudentData(data){
  return request({
    url:"/signup/exportStudentData",
    method:"post",
    data,
    responseType: 'blob'
  })
}

下载zip

// 下载
    handleDown(row) {
      downloadShare(row.id).then((response) => {
        this.downloadFile(response, row);
      });
    },
    downloadFile(data, row) {
      let blob = new Blob([data], { type: "application/zip" });
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement("a"); // 创建a标签
      link.href = url;
      link.download = row.dataSetVersion + '-' + formalDateTime(new Date().getTime() / 1000, 5); // 重命名文件
      link.click();
      URL.revokeObjectURL(url); // 释放内存
    },

 // 封装请求的地方需要这么写：
// 获取 下载共享
export function downloadShare(id) {
  return request({
    url: '/ai/share/download/' + id,
    method: 'get',
    responseType: 'blob',
    headers: {
      'Conntent-Type': 'application/json; application/octet-stream;'
    }
  })
}