vue+elementUI el-table导出excel表格

vue+elementUI el-table导出excel表格

  1. 安装依赖库:
npm install -D xlsx ,file-saver
npm install -s script-loader
  1. 在项目的src文件夹下新建一个文件夹vendor:(vendor—名字任取),里面放置两个文件Blob.js和 Export2Excel.js。这两个文件去这里下载:点我下载

vue+elementUI el-table导出excel表格_第1张图片

  1. 在当前.vue文件中引入相关依赖:
require('script-loader!file-saver'); //保存文件用
require('script-loader!vendor/Blob'); //转二进制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心
  1. 更改webpack.base.conf.js配置
在resolve的alias中添加一段话: 'vendor': path.resolve(__dirname, '../src/vendor'),

vue+elementUI el-table导出excel表格_第2张图片
5. 在.vue文件中,methods中添加如下两个方法:

    export2Excel() {
    require.ensure([], () => {
      const { export_json_to_excel } = require('../vendor/Export2Excel');
      const tHeader = ['序号','县(村)编号IDA', '县(村)名称'];            // 对应表格输出的title
      const filterVal = ['', 'ida', 'cname'];                             // 对应表格输出的数据
      const list = this.dataList;
      const data = this.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, '县(村)基本信息Excel表');                   //对应下载文件的名字
    })
  },
  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  }

vue+elementUI el-table导出excel表格_第3张图片
6. 新建button。触发export2Excel事件即可。

导出

你可能感兴趣的