本篇主要介绍了vue导出json数据到excel电子表格的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
网上看了很多文档感觉都不全，这里写一篇完整的详细教程。
一、安装依赖（前面基本一样）
npm install file-saver --savenpm install xlsx --savenpm install script-loader --save-dev
登录后复制
二、下载两个所需要的js文件Blob.js和 Export2Excel.js。
这里贴下下载地址：
立即学习“前端免费学习笔记（深入）”；
Export2Exce_jb51.rar
三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。
四、更改webpack.base.conf.js配置
在resolve的alias：
'vendor': path.resolve(__dirname, '../src/vendor')
登录后复制
五、在.vue文件中
script部分
data(){ return{ list:[ { name:'韩版设计时尚风衣大', number:'MPM00112', salePrice:'￥999.00', stocknums:3423, salesnums:3423, sharenums:3423, }, { name:'韩版设计时尚风衣大', number:'MPM00112', salePrice:'￥999.00', stocknums:3423, salesnums:3423, sharenums:3423, }, ] }methods:{ formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }, export2Excel() { require.ensure([], () => { const { export_json_to_excel } = require('../../../vendor/Export2Excel'); const tHeader = ['商品名称','商品货号','售价','库存','销量','分享',]; const filterVal = ['name', 'number', 'salePrice', 'stocknums', 'salesnums', 'sharenums', ]; const list = this.goodsItems; const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '商品管理列表'); }) }}
登录后复制
template:
登录后复制
这里说明一下：
1、export2Excel()中require的路径因个人项目结构不同可能需要单独调整，如果报module not found ‘../../Export2Excel.js’之类请自行修改路径。
2、tHeader是每一栏的名称，需手动输入。
3、filterVal是data中list的key值，也是要自己写的。
4、这里记得要与data里面的list名称对应
5、这里可定义导出的excel文件名
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在Vue中有关调试工具vue-devtools（详细教程）
在Vue中有关调试工具vue-devtools（详细教程）
在Vue中有关调试工具vue-devtools（详细教程）
以上就是在Vue中如何导出json数据到Excel电子表格的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2749290.html
