vue 导出JSON数据为Excel

1. 安装三个依赖

npm install file-saver --save

npm install xlsx --save

npm 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())
    })
}

 

4. 在界面添加一个按钮

<el-button type="primary" @click="jsonToExcel">导出</el-button>