vue-element框架通过blob进行后端token权限验证下载

vue-element框架通过blob进行后端token权限验证下载


在项目中,后端要求下载时要进行后端的权限验证,发现a链接进行直接下载无法满足这个需求,只能通过blob对象来进行下载操作,翻阅大量资料最后实现该功能。以下是我个人的理解,如有不足,请各位大佬多指教

export function exportFile2excel(fileName, url, params) {
  service.get(url, { params }).then((res) => { 
    if(!res){
      Message({
        message: '暂无可下载数据',
        type: 'error',
        duration: 5 * 1000
      })
    }else{
//该部分为主要代码,与接口衔接即可,其余部分可以忽略
      const blob = new Blob([res], { type: 'application/vnd.ms-excel' }); 
      const urls = window.URL.createObjectURL(blob);
      const a = document.createElement('a');//生成虚拟a标签
      a.href = urls;
      a.download = [fileName];
      a.click();
      window.URL.revokeObjectURL(urls);
    }
  })
}

在其它页面调用该方法即可

import { exportFile2excel } from '文件路径'
//导出招标文件购买记录
export function export(data) {
  const fileName = 'XXX一览表'
    const url = '接口路径'
    const sendData={ //传输的数据
      projid: data.projid,
      bidid: data.bidid
    }
    return exportFile2excel(fileName, url,  sendData )
}

在vue页面写个按钮调用该方法(export)即可

blob导出不同文件所需MIME类型
blob构造函数的语法:let Blobs = new Blob( array, options );
array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。
options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。
endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 “transparent”,代表会保持blob中保存的结束符不变

文件后缀 MIME类型
.doc application/msword
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.ppt application/vnd.ms-powerpoint
.pptx application/vnd.ms-powerpoint
.xls application/vnd.ms-excel
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.htm text/html

官方文档链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob

前端新人,如有问题和不足之处,请指出,谢谢

发布了1 篇原创文章 · 获赞 0 · 访问量 6
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览