[前端笔记] Vue页面table导出Excel

本次导出针对于页面table导出!

1、安装三个依赖包

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

2、在项目中创建一个文件夹（比如utils，一般是在src目录下创建）

把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹内

文件已经打包好...

送你传送门

Exprot2Excle.js

 中我加了这么一段代码,原因是在Exprot2Excle.js中由于这几个文件不支持import引入，所以我们需要`script-loader`来将他们挂载到全局环境下

require('script-loader!file-saver'); //保存文件用
 require('script-loader!utils/Blob'); //转二进制用(此处需映射到自己下载的blob.js文件)
 require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心

3、在页面中使用

 

html

<button type="button" class="btn btn-primary" @click="export2Excel">导出excel</button>

 js

export2Excel () {
    require.ensure([], () => {
      const { export_json_to_excel } = require('../utils/Export2Excel')
      const tHeader = ['日期', '猪只代码', '胎次', '淘汰类型', '淘汰原因', '淘汰状态', '品种', '入场时间', '所在农场', '舍']
      const filterVal = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
      const list = this.datas
      const data = this.formatJson(filterVal, list)
      export_json_to_excel(tHeader, data, '列表excel')
    })
},
formatJson (filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
}

ps:此处的list对应的 this.datas.就是我们从后台查询返回回来的数据..filterVal是我们每一列映射的值.tHeader是表头..此处需要注意的是Excport2Excel文件的路径问题.

 

送你传送门