Vue Excel表按钮导出功能

来源：互联网发布：foursqure 数据集下载编辑：程序博客网时间：2024/06/06 05:08

vue 导出excel表功能

1.需要安装三个依赖：

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

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

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

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

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]))        }

5.按钮导出调用export2Excel方法

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

阅读全文

0 0