Bootstrap

vue 使用插件下载excel表格;文件流下载excel表格

第一种方法:使用插件

1、安装依赖 yarn add xlsx 和 yarn add file-saver
2、在组件中引入

import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’

3、添加下载方法
注意:#out-table为table节点的id

<el-table id="out-table"></el-table>
// 导出
    outTab () {
      let fix = document.querySelector('.el-table__fixed');
      let wb
      if (fix) {
        wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));
        document.querySelector("#out-table").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      }
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
      FileSaver.saveAs(new Blob([wbout], {
        type: 'application/octet-stream'
      }), 'file.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout;
    }

第二种:后端返回文件流下载

js代码

this.exportList(exporInfo).then((e)=>{
  console.log('导出列表:',this.exportListData)

  let blob = new Blob([this.exportListData.data], {type: 'application/vnd.ms-excel'}) 
  let downloadElement = document.createElement('a') // 获取table表格
  let href = window.URL.createObjectURL(blob); //创建下载的链接
  downloadElement.href = href;
  downloadElement.download = this.exportListData.headers.filenames; //下载后文件名
  document.body.appendChild(downloadElement);

  // 方法一:跳链接下载(推荐这种方法,可以解决下载之后的表格打不开的问题)
  let getUrlData = `https://zhbs.fpsd.unionpay.com/jfAdmin/api/v1/order/export?${param(exporInfo)}` // 拼接的跳转路径
  window.location.href = getUrlData

  // 方法二:直接正常下载(下载的文件可能会出现打不开的情况)
  // downloadElement.click(); //点击下载
  // document.body.removeChild(downloadElement); //下载完成移除元素
  // window.URL.revokeObjectURL(href); //释放blob对象
})

注意:
1、要下载引入jquery-param插件:import param from 'jquery-param'
2、exportList 为封装的调后端接口的方法
3、blob 为处理后的后端返回的文件流数据
4、a 为 table 表格的 class 类

;