标签：vue res excel 兼容 href let blob downloadElement new

记一次vue将列表下载为excel的兼容写法

需求需要将后端返回的列表数据下载到本地，查询资料发现采用blob文件流下载

1、后端返回的是blob文件流，传统的模拟href点击在IE下不兼容，无法下载 故采用兼容写法如下

/* 批量文件下载 */
export function listFileDownload(params) {
  api({
    url: '/mweb/mcif.TellerListDownLoad.do',
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;application/octet-stream'
    },
    transformRequest: [() => {
      let ret = ''
      for (let i in params) {
        ret += encodeURIComponent(i) + '=' + encodeURIComponent(params[i]) + '&'
      }
      return ret
    }],
    data: params,
    responseType: 'blob'
  }).then(res => {
    if ('msSaveOrOpenBlob' in navigator) {
      var data = res
      var blob = new Blob([data], { type: 'application/vnd.ms-excel' })
      window.navigator.msSaveOrOpenBlob(data, 'MSPOptJnl' + new Date().getTime() + '.xls')
    } else {
      let blob = new Blob([res])
      let downloadElement = document.createElement('a')
      let href = URL.createObjectURL(blob)
      downloadElement.href = href
      downloadElement.download = 'mcif.TellerList_' + new Date().getTime() + '.xls'
      document.body.appendChild(downloadElement)
      downloadElement.click()
      document.body.removeChild(downloadElement)
      window.URL.revokeObjectURL(href)
    }
  })
    .catch(err => {
      console.log(err);
    })
}

2、后端列返回的是纯数组，采用模板拼接数据，IE采用msSaveBlob进行下载，chorme还是采用模拟点击，具体如下

/* 文件下载 */
export function fileDownload(params) {
  api({
    url: 'msp.MspTransOprtJnl.do',
    method: 'post',
    data: params,
  }).then(res => {
    let str = `机构编号,机构名称,MSP客户编号,客户姓名,操作内容,操作起止日期\n`;
    let name = ['TransDeptId', 'TransDeptName', 'OptId', 'OptName', 'TransBusGroupName', 'TransDate']
    // 增加\t为了不让表格显示科学计数法或者其他格式
    for (let i = 0; i < res.List.length; i++) {
      for (const key in res.List[i]) {
        for (let j = 0; j < name.length; j++) {
          if (key == name[j]) {
            str += `${res.List[i][key] + '\t'},`;
          }
        }
      }
      str += '\n';
    }
    if ('msSaveOrOpenBlob' in navigator) {
      var blob = new Blob([decodeURIComponent(encodeURI(str))], { type: "text/csv;charset=utf-8;" });
      navigator.msSaveBlob(blob, 'MSPOptJnl' + new Date().getTime() + '.xls');//filename文件名包括扩展名，下载路径为浏览器默认路径
    } else {
      // encodeURIComponent解决中文乱码
      const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      // 通过创建a标签实现
      const link = document.createElement("a");
      link.href = uri;
      // 对下载的文件命名
      link.download = 'MSPOptJnl' + new Date().getTime() + '.xls';
      link.click();
    }
  })
    .catch(err => {
      console.log(err);

    })
}

标签：vue,res,excel,兼容,href,let,blob,downloadElement,new
来源： https://blog.csdn.net/m0_46562551/article/details/114963219

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。