首页 > Web开发 > 详细

vue 导出JSON数据为Excel

时间:2019-09-27 19:17:51      阅读:123      评论:0      收藏:0      [点我收藏+]

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>

 

vue 导出JSON数据为Excel

原文:https://www.cnblogs.com/qipan/p/11599372.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!