vue项目中列表数据导出为excel格式数据
第一步:安装三个依赖包npm install -S file-saver(生产依赖,则为-s)npm install -S xlsxnpm install -D script-loader (开发依赖,则为-d)第二步:引入三个文件:我们在src目录下新建一个文件夹,例如vendor,然后把:Blob.js和 Export2Excel.js两个文件(可以去网上找这两个文件)放在...
·
第一步:安装三个依赖包
npm install -S file-saver(生产依赖,则为-s)
npm install -S xlsx
npm install -D script-loader (开发依赖,则为-d)
第二步:引入三个文件:
我们在src目录下新建一个文件夹,例如vendor,然后把:Blob.js和 Export2Excel.js两个文件(可以去网上找这两个文件)放在该文件夹下,在Export2Excel.js文件中我们引入
require('script-loader!file-saver'); // 保存文件
require('script-loader!@/vendor/Blob'); // 转二进制
由于这几个文件不支持import引入,所以我们需要`script-loader`来将他们挂载到全局环境下
import XLSX from 'xlsx' // xlsx核心
第三步:使用
我们在需要的地方(如按下导出的点击事件)书写如下代码
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'] // excel的表头标题
const filterVal = ['id', 'name', 'name', 'age', 'addr'] // 需要导出对应自己列表中的每项数据
const list = this.listData // 整个列表的数据
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
autoWidth: this.autoWidth,
filename: 'table-list' // 文件名称,若不写导出文件可能不识别
})
},
formatJson(filterVal, jsonData) { // 在整个列表的数据中过滤导出自己需要的数据
return jsonData.map(v => filterVal.map(j => {v[j]}))},
更多推荐
已为社区贡献42条内容
所有评论(0)