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

9 篇文章 0 订阅
3 篇文章 0 订阅

最近在做后台管理系统 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 浏览器是做了个提示 提示去谷歌或者火狐浏览器去下载

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值