zoukankan      html  css  js  c++  java
  • vue-element框架通过blob进行后端token权限验证下载

    在项目中,后端要求下载时要进行后端的权限验证,发现a链接进行直接下载无法满足这个需求,只能通过blob对象来进行下载操作,翻阅大量资料最后实现该功能。以下是我个人的理解,如有不足,请各位大佬多指教
    // 导出excel
    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导出不同文件所需格式类型

    文件后缀content-type
    .doc application/msword
    .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
    .xls application/vnd.ms-excel
    .xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
    .ppt application/vnd.ms-powerpoint
    .pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
    前端新人,如有问题和不足之处,请指出,谢谢
  • 相关阅读:
    哪种可以让程序员赚到更多钱?
    layer 弹框 很好用 页面交互不好弄!!!父子弹框的交互!
    博客导航
    扯淡扯着扯着就远了----关键字;宁静致远
    高驰涛——裸奔到北京的程序猿
    TP5分页类使用——超级简单好用
    七牛云同步资源工具使用说明
    短链接实现原理和简单调用
    抓包工具Charles下载地址及Charles配置https
    敲代码的少年
  • 原文地址:https://www.cnblogs.com/qtz666/p/12564797.html
Copyright © 2011-2022 走看看