vue blob 文件流下载

最新推荐文章于 2024-07-10 14:22:07 发布

马飞飞X

最新推荐文章于 2024-07-10 14:22:07 发布

阅读量318

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xxf995546883/article/details/125384931

版权

这篇博客主要介绍了在Vue.js中如何处理接口返回的Blob类型文件流进行下载。关键在于将响应类型设置为'responseType: 'blob''，然后将二进制文件流转换为Blob对象，并通过设置link.download属性指定文件名完成下载。

摘要由CSDN通过智能技术生成

重点接口的返回类型设置为 responseType: 'blob',

downLoadFile: (params) => {
    return axios.get(`${urls.kaizenEvent.downLoadFile}`, {
      params: params,
      responseType: 'blob',
    });
  },

下载方法的实现

重点将返回的二进制文件流转为blob 去接受

link.download = item.fileName; 文件名可以自己设置也可以根据接口返回的内容显示

this.$api.kaizenEvent
        .downLoadFile(params)
        .then((res) => {
          console.log(841, res);
          let blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel;charset=UTF-8',
          });
          console.log(847, blob);
          if (window.navigator.msSaveOrOpenBlob) {
            //兼容 IE & EDGE
            navigator.msSaveBlob(blob);
          } else {
            var link = document.createElement('a');
            // 兼容不同浏览器的URL对象
            const url = window.URL ||