基于vue，导出为excel表格

前端基于vue，导出为excel表格

由后端生成excel表格

当由后端生成excel表格，返回来的数据时乱码的
因此前端要做处理，前端关键，主要有两步
1. 发送请求时，要加responseType: 'blob'
2. 处理返回的函数

// 对返回数据的处理函数
dealExcelRespose(res,filename){
    const link = document.createElement('a')
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    // link.download = res.headers['content-disposition'] //下载后文件名
    link.download = filename//下载的文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}
// ....省略
$.ajax({
    data:data, //data 为要发送的数据
    method:'post',//或get 根据实际情况
    responseType: 'blob',
    success:(res)=>{
        this.dealExcelRespose(res,'文件名')
    }
})

后端返对象，前端来生成excel表格

下载依赖包

cnpm install -S file-saver xlsx
cnpm install -D script-loader

引入两个文件，

百度网盘：
链接：https://pan.baidu.com/s/180TV1O1GpJXqZqTtG0AjyA
提取码：7b9z
关键代码如下

// 导出
outPut(){
    console.log('点击了导出')
    //表格对象
    let sourceOriginAmount = [
        {
            goodsName: '苹果',
            sourceCode: '123'
        },
        {
            goodsName: '香蕉',
            sourceCode: '234'
        }
    ]; 
    const tHeader = ['编号', '商品名称', '溯源码']; //表格表头
    const filterVal = ['index', 'goodsName', 'sourceCode']; //要渲染的列
    turnToExcel(sourceOriginAmount,tHeader,filterVal,'表格名字') //调用封装的函数
},
// 封装的函数
turnToExcel(sourceOriginAmount,tHeader,filterVal,filename){
  import('@/assets/js/Export2Excel.js').then(excel => { // 导入js模块
          const list = (sourceOriginAmount || []).map((item, key) => { // 通过 map 方法遍历，组装数据成上面的格式
              let obj_index={index:key+1}
              let obj={...item,...obj_index}
              return obj
          });
          if (list) {
              const data = list.map(v => filterVal.map(j => v[j]));// 生成json数据
              excel.export_json_to_excel({ // 调用excel方法生成表格
                  header: tHeader,
                  data,
                  filename
              });
          } else {
              alert('暂无无数据');
          }
          // this.loading = false;
      })
}

基于vue，导出为excel表格

前端基于vue，导出为excel表格

推荐阅读