当前位置：首页 > news >正文

vue项目下载兼容ie,接口返回url；url转二进制流下载；

news 来源：原创 2024/4/20 7:59:15

最近在做后台管理系统 vue +若依记录导出订单(表格)遇到的问题
1.后台返回了表格的路径 url 最简单的方法 a 标签搞定

<a :href="record.url" :download="record.name"></a>

2.经不住测试啊，ie 浏览器下载不兼容一直困扰了很久，分享给大家
新建一个js 文件 downloadFile.js 封装方法

import message from 'ant-design-vue/es/message'  // 此处引用antdesig 的提示组件，如果不需要可以不用
 /**
 *下载导出文件
 * @param blob  ：返回数据的blob对象或链接
 * @param tagFileName  ：下载后文件名标记
 * @param fileType  ：文件类 word(docx) excel(xlsx) ppt、pdf等
 */

 export default function downloadFile(blob, tagFileName) {
    const href = window.URL.createObjectURL(blob); //创建下载的链接
    var ua = navigator.userAgent.toLocaleLowerCase(); 
    if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { //qq 浏览器
        message.warning('请使用谷歌浏览器或者火狐浏览器下载');
        return
    }else if ("msSaveOrOpenBlob" in navigator){// ie
        window.navigator.msSaveOrOpenBlob(blob, tagFileName);
   
    }else {
        // 谷歌浏览器 创建a标签 添加download属性下载
        let downloadElement = document.createElement('a');
        if (typeof blob == 'string') {
            downloadElement.target = '_blank';
        }
        downloadElement.href = href;
        downloadElement.download = tagFileName;
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        if (typeof blob != 'string') {
            window.URL.revokeObjectURL(href); //释放掉blob对象
        }
    }
}

组件中引用

import downloadFile from '@/utils/downloadFile' 引入


async  goDownLoadfile(item){
     //url  接口给的是一个url,需要转成二进制流
      let url = item.file_url+ '?' + Math.random();  // ie 浏览器请求接口报304  在url 后面增加随机数
      this.$ajax.get(url,{      // this.$ajax  这个是挂在在vue 原型链上的axios属性
        responseType:'blob'
      })
      .then((res)=>{
        downloadFile(new Blob([res.data],{type: "application/vnd.ms-excel" }), item.task_name);
      }).catch((response)=>{
        console.log(response,'错误吗错误');
      })
    },

OK 完美解决
qq 浏览器是做了个提示提示去谷歌或者火狐浏览器去下载