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

记一次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);

    })
}