Vue导出数据到Excel电子表格

参考:https://segmentfault.com/a/1190000012117303#comment-area

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

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{
    coundHostList:[
        {
          number:'0001',
          name:'商品1',
          htnumber:'001',
          htname:'合同1',
          version:'1.0.0.1',
          qyperson:'张三',
          extime:'2020-03-13'
      },
       {
          number:'0002',
          name:'商品2',
          htnumber:'002',
          htname:'合同2',
          version:'1.0.0.2',
          qyperson:'赵四',
          extime:'2020-03-15'
      },
    ]
  }
  },
  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 = ['number', 'name', 'htnumber', 'htname','version', 'qyperson', 'extime', ];
          const list = this.coundHostList;
          const data = this.formatJson(filterVal,list);
          export_json_to_excel(tHeader, data, '商品管理列表');
        })
      },
  },

 这里说明一下:

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

2、tHeader是每一栏的名称,需手动输入。filterVal是data中list的key值,也是要自己写的。

const { export_json_to_excel } = require('../../../vendor/Export2Excel') //路径问题
const tHeader = ['项目编号','项目名称','合同编号','合同名称','版本','权益人','过期时间'];

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

Vue导出数据到Excel电子表格_第1张图片

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

export_json_to_excel(tHeader, data, '云主机列表');

 

你可能感兴趣的