VUE Table导出功能实现

vue 导出excel表功能

1.需要安装三个依赖：

npm install -S file-saver xlsx
npm install -D script-loader

• 1
• 2

2.项目中新建一个文件夹：（vendor—名字任取） 
里面放置两个文件Blob.js和 Export2Excel.js。 
下载点击Blob.js和 Export2Excel.js文件

3.HTML部分：增加导出按钮

<el-button type="primary" @click="exportTable()">导出Excel</el-button>

• 1

4.methods里面：

exportTable() {
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');
            const tHeader = ['供应商编号', '供应商名称', '输入代码', '税务代码'];
            const filterVal = ['num', 'name', 'words', 'shuiwu_num'];
            const list = this.tableData;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '供应商名称列表');
          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

两个文件Blob.js和 Export2Excel.js可以联系我给你们源码

5.按钮导出调用export2Excel方法

注：如果webpack报解析错误：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解决

另：alias是配置别名