vue|vue 实现excel导出功能
最近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 = https://www.it610.com/article/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: "小明" },
【vue|vue 实现excel导出功能】{ index: "1", nickName: "我的评论", name: "小红" },
{ index: "2", nickName: "我的参与", name: "小兰" },
{ index: "2", nickName: "最新评论", name: "小芳" },
{ index: "2", nickName: "我的标签", name: "小兵" }
]
文章图片
红框即为数据类型 导出结果
文章图片
导出的Excel表 如有问题欢迎大家一起交流，不喜还请各路大佬高抬贵手
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆