最近Vue项目中用到了导出功能，在网上搜索了一番之后，决定采用Blob方式，这也是大家推荐的一种的方式，特此做下记录。
导出Excel功能
我是使用vue-cli3.0的框架，所以在安装过程中没有遇到问题,看百度说有些人在安装过程中会报错，具体情况大家可以在找一下原因
使用npm安装：
npm install -S file-saver xlsx（这里其实安装了2个依赖）
npm install -D script-loader
添加js文件下载所需的两个文件：Blob.js、Export2Excel.js
链接：https://pan.baidu.com/s/1x3uqGtJX3N9lNzJuUlZjjQ提取码：rkkf复制这段内容后打开百度网盘手机App，操作更方便哦
下载后把他放在项目中，放在哪里都可以在，然后在main.js中引入，只有路径正确就可以
main.js全局引入Blob.js和Export2Excel.js
定义一个导出数据按钮
使用方法
exportExcel() {
require.ensure([], () => {
const { export_json_to_excel } = require("resource/plugins/excel/Export2Excel.js");
const tHeader = ["序号", "列表", "姓名"];
// 上面设置Excel的表格第一行的标题
const filterVal = ["index", "nickName", "name"];
// 上面的index、nickName、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]));
},
上面是代码可复制的，下面是图片看得比较清楚，我不知道简书为啥不能给他加样式，待我去研究...嘻嘻
数据类型
tableData: [
{ index: "0", nickName: "我的随笔", name: "小明" },
{ index: "1", nickName: "我的评论", name: "小红" },
{ index: "2", nickName: "我的参与", name: "小兰" },
{ index: "2", nickName: "最新评论", name: "小芳" },
{ index: "2", nickName: "我的标签", name: "小兵" }
]
红框即为数据类型
导出结果
导出的Excel表
如有问题欢迎大家一起交流，不喜还请各路大佬高抬贵手
网友评论