欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-25 13:28:03
网上看了很多文档感觉都不全,这里写一篇完整的详细教程。 一、安装依赖(前面基本一样) npm install file-saver --save npm in...

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

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

npm install file-saver --save
npm install xlsx --save
npm 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:

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

这里说明一下:

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

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

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

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

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。