Vue项目中将表格内的数据导出为Excel文件
首先安装三个依赖npm install -S file-saver xlsxnpm install -D script-loader在src目录下新建excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件链接: https://pan.baidu.com/s/1b7b23xX-XWQmvYUIhPFouA 密码: vxdi现在回到你要用导出功能...
·
首先安装三个依赖
npm install -S file-saver xlsx
npm install -D script-loader
或者
yarn add file-saver
yarn add xlsx
yarn add script-loader --dev
引入两个js文件
在src目录下新建excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件
链接: https://pan.baidu.com/s/1b7b23xX-XWQmvYUIhPFouA 密码: vxdi
在main.js引入这两个文件(路径取决你们的路径)
正确设置路径
打开Export2Excel.js文件,设置里面的路径,正确引入Blob.js
现在回到你要用导出功能的组件里,在data里放入tableData变量,这个是存放你表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象,存入tableData。
举个栗子:
如果你的每一行是这样子
那么data里的tableData就是这样子(切记,你的表格有多少行内容,tableData里就存多少个对象,对象属性不用变,改变值即可)
接下来在methods里写入两个方法,如下:
哪个按钮是导出功能,就调用export2Excel()方法
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序号', '帐号', '院校'];
// 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'phone_Num', 'school_Name'];
// 上面的index、phone_Num、school_Name是tableData里对象的属性
const list = this.tableData; //把data里的tableData存到list
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]))
}
注意上面的方法也有个路径问题,要自己修改
导出效果如下
更多推荐
已为社区贡献3条内容
所有评论(0)