vue 导出简单表格

最新推荐文章于 2025-07-08 18:01:17 发布

原创最新推荐文章于 2025-07-08 18:01:17 发布 · 434 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

7 篇文章

订阅专栏

第一步：安装三个依赖

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

第二步：在项目目录下新建一个文件夹vendor（这个文件夹名字随便取）,里面放置两个文件Blob.js和 Export2Excel.js
两个js文件的下载点我提取码是ot70
在这里插入图片描述

最后一步：在导出页面的方法中写入如下两个方法，点击导出按钮时候，触发export2Excel方法即可

export2Excel() {
　　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');
　　　　　　　　const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名']; //表头
　　　　　　　　const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name']; //表头对应属性
　　　　　　　　const list = this.tableData; //数据
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, '列表excel');   // 列表excel 是导出的excel的名字，可以随便改
　　　　　　})
　　　　},
formatJson(filterVal, jsonData) {
　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　　}