专栏首页前端博客:https://alili.techVue导出json数据到Excel电子表格

抱歉,你查看的文章已删除

Vue导出json数据到Excel电子表格

原文链接

https://segmentfault.com/a/1190000012117303

网上看了很多文档感觉都不全,这里写一篇完整的详细教程。

一、安装依赖(前面基本一样)

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

二、下载两个所需要的js文件Blob.js和 Export2Excel.js。

这里贴下下载地址:

http://xiazai.jb51.net/201708/yuanma/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:

<button @click="export2Excel">导出</button>

这里说明一下:

1、export2Excel()中require的路径因个人项目结构不同可能需要单独调整,如果报module not found '../../Export2Excel.js'之类请自行修改路径。

2、tHeader是每一栏的名称,需手动输入。

3、filterVal是data中list的key值,也是要自己写的。

4、这里记得要与data里面的list名称对应

5、这里可定义导出的excel文件名

参考文章:https://www.cnblogs.com/Mrfan...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • android入门 — ListView点击事件

    Mister24
  • SDN对传统网络的变革和提升(完整版)

    SDN的概念出现于2007年象牙塔内的斯坦福大学,兴起于2012年互联网大佬Google的B4首秀,火热于2016年万企入云的风起云涌,可以说如今在通信、互联网...

    SDNLAB
  • Wind开放疫情数据:三行代码,轻松搞定!

    2020年,“新型冠状病毒肺炎”疫情牵动着数亿华夏儿女的心!万得作为中国大陆领先的金融数据、信息和软件服务企业,迅速组织相关人员日夜奋战,第一时间在Wind金融...

    量化投资与机器学习微信公众号
  • 数据字典生成工具之旅(4):NPOI操作EXECL

           这篇会介绍NPOI读写EXECL,读写EXECL的组件很多,可以使用微软自己的COM组件EXECL.exe读写,不过这种方式限制很大。      ...

    用户1168362
  • 回眸ONS2015,不容错过的精彩看点

    刚刚闭幕的2015年开放网络峰会(ONS),注定有很多夺人眼球的事件发生。的确,作为SDN/NFV领域每年一度的盛会,它代表着该领域内的最新成果,也引导着整个行...

    SDNLAB
  • 同程艺龙小程序性能监控系统的探索与实践

    导语 |近日,云+社区开发者大会(苏州站)圆满落幕。本次开发者邀请了腾讯内部及业内行业大咖就物联网、小程序、微服务等当前互联网领域的热点技术的落地实践问题进行了...

    coder_koala
  • Java EE之SSM框架整合开发 -- (2) Spring IoC

    本章主要讲解内容:Spring IoC的基本概念、Spring IoC容器、依赖注入的类型。

    浩Coding

扫码关注云+社区

领取腾讯云代金券