vue 导出JSON数据为Excel

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. 安装三个依赖

npm install file-saver --savenpm install xlsx --savenpm install script-loader --save-dev

2. 首先在项目中加入两个js

Export2Exce.js
Blob.js依照我的需求更改了Export2Exce.js 中为 require('script-loader!Blob')
原来是 require(‘script-loader!vendor/Blob’) 如果报此路径错误，根据自己的需求进行修改

博客园下载地址：https://files.cnblogs.com/files/qipan/js.rar

3. 在 methods 中添加下面代码

// 导出表格所用
formatJson(filterVal, jsonData) { // 格式化JSON数据
return jsonData.map(v => filterVal.map(j => v[j]))
},
formatDate() { // 部分标题名
let time = new Date()
let year = time.getFullYear()
let month = time.getMonth() + 1
let day = time.getDate()
let hour = time.getHours()
let minute = time.getMinutes()
let seconds = time.getSeconds()
return year + "" + month + "" + day + "" + hour + "" + minute + "" + seconds
},
jsonToExcel() {
require.ensure([], () => {
// 引入依赖 js
const {export_json_to_excel} = require('../../../../public/Export2Excel')
// filterVal内容是json中的键
let filterVal = ["description","createUser","createDateTime","modifyUser","modifyDateTime"]
// tHeader内容是excel中的第一行
let tHeader = ["描述","创建者","创建时间","修改者","修改时间"]
const list = this.listData // json 数据
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, this.title + "_" + this.formatDate())
})
}