vue实现表格导出excel

首先需要安装三个依赖：npm install -S file-saver xlsx (两个依赖)和 npm install -D script-loader(一个依赖)。
在src目录下新建一个文件夹，名字随意，我这里用vendor，然后在该文件夹下放入Blob.js和Export2Excal.js 如图：
Blob.js和Export2Excal.js 下载地址→点击下载

用法：在对应按钮处添加点击事件

<Table  :columns="columns" :data="datas"   id="table1">
    <template slot="header">
        <Row>
            <Col span="4">
                <h4>预算年份：2018年</h4>
            </Col>                    
            <Col span="20">
               <div class="table-head-button" >
                  <Button type="primary"  @click="export2Excel()">预算导出</Button>                             
               </div>    
            </Col>
        </Row>
     </template>
</Table>

 methods: {
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = this.columns; //表头
        const filterVal =  ['a01', 'a02', 'a03', 'a04', 'a05'];//对应字段
        const list =  this.datas;
        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]));
    }
  }

如果webpack报解析错误：

在build——webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor')

vue实现表格导出excel

相关推荐