2021-04-27

本文主要是介绍2021-04-27，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、 第一步先安装3个依赖包：

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

觉得下载太慢的话可以安装淘宝镜像，用cnpm下载。

二、在项目中新建一个文件夹（名字自取，这里命名excel），然后在文件夹中放入Blob.js 和 export2Excel.js 两个文件（我把地址贴在这，可以直接下载解压）

链接地址：https://pan.baidu.com/s/1itpx7GqPhp44CWdK-NT5qw
提取码：kzlr

三、在你要导出表格的"xxx.vue"页面给按钮绑定点击事件：

<Button type=“primary” @click=“exportData” style=“display:block; margin:5px auto;”>导出Excel表格
1
在标签的methods方法中调用下载表格的事件

methods: {
//触发按钮点击下载事件
exportData() {
this.excelData = this.historyList; //将你要导出的数组数据（historyList）赋值给excelDate
this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
}，
//表格数据写入excel
export2Excel() {
var that = this;
require.ensure([], () => {
const {
export_json_to_excel
} = require("@/assets/excel/Export2Excel");
//这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"…/assets/excel/Export2Excel"】
const tHeader = [“报名日期”, “姓名”, “班级”, “学号”,“性别”,“邮箱”,“联系方式”,“所选导师”]; // 导出的excel表头名信息
const filterVal = [
“date”,
“name”,
“class”,
“studentId”,
“sex”,
“email”,
“telephone”,
“teacher”
]; // 导出的excel表头字段名，需要导出表格字段名
const list = that.excelData;
const data = that.formatJson(filterVal, list);

    export_json_to_excel(tHeader, data, "学生报名信息汇总"); // 导出的表格名称，根据需要自己命名
  });
},
//格式转换，直接复制即可,不需要修改什么
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]));
}

}

四、总结一下这段代码需要按照个人需求修改的几个小点：
高亮部分就是改动点 ——

this.excelData = this.historyList;
require("@/assets/excel/Export2Excel");
const tHeader = [“报名日期”, “姓名”, “班级”, “学号”,“性别”,“邮箱”,“联系方式”,“所选导师”];
const filterVal = [
“date”,
“name”,
“class”,
“studentId”,
“sex”,
“email”,
“telephone”,
“teacher”
];
export_json_to_excel(tHeader, data, “学生报名信息汇总”);
原文链接：https://blog.csdn.net/weixin_44791115/article/details/101602980

这篇关于2021-04-27的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！