vuecli3下载excel_vue中如何进行Excel文件的下载
文章目录
业务需求：
实现方式
A1、模板下载：
A2、搜索下载：
A3、勾选下载：
A4、上传错误记录下载Excel文件
业务需求：
Q1、文件批量导入前，需要按照指定的格式与内容上传Excel文件，首先要下载模板。
Q2、将查询到的数据以table表的形式 进行显示，对表格内容进行有选择的下载。
A、勾选下载：
table表中包含一列选择框，el-table-column，设type属性为selection即可
B、搜索下载：
根据搜索条件查询相关数据，下载查询出的数据。
Q3、上传Excel文件时，记录有若干条，不满足条件的记录将不能成功上传，把上传有误的记录进行下载，其中包含出错原因。
实现方式
A1、模板下载：
前提：后端已配置模板数据，有接口。
实现：window.open(“URL”);
手册：https://www.runoob.com/jsref/obj-window.html
Window对象表示浏览器中打开的窗口。所有浏览器都支持该对象。
实例：
###alert()显示带有一段消息和一个确认按钮的警告框。
alert(“error submit!!”)
###open()打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open("/api/teach/downLoadTemplate");
A2、搜索下载：
前提：后端已配置检索数据的接口。
实现：window.open(“URL”);
实例：
需要请求的URL：
实现：
window.open("/api/ach/eortExcnon?"+"code="+this.qourseUnion.code+"&"+"institunName="+this.queCoursion.insttName+"&"+"name="+this.queryCoeUnion.name);
A3、勾选下载：
场景：将table表数据勾选导出Excel文件
实现：引入js文件，做相应配置。
具体步骤：
1、安装三个依赖项：
$ npm install -S file-saver
$ npm install -S xlsx
$ npm install -D script-loader
2、在项目中新建文件夹，导入js文件。
文件下载地址： https://github.com/7metamorphosis/study/tree/vendor
3、在组件中引入js文件：
【注】网上资料会有在webpack配置文件中做额外的配置.
在build/webpack.base.conf.js中resolve的alias加入'vendor':
path.resolve(__dirname,'../src/vendor'),
##注意：配置完成后 直接运行npm run dev 则会出现报错
此时需要将依赖包node_modules直接删除 重新用cnpm install 进行安装。
最后再运行npm run dev 即可
自己配置时，可能找不到这个配置文件。这个默认的配置文件与使用的vue-cli脚手架初始化项目版本有关。目前我们这个项目中的配置文件是vue.config.js。这个配置文件中不需要对上面引入的Excel js文件做相应配置，只需要在使用导出Excel文件的组件中导入即可。
4、业务代码编写：
组件引入：
ref="multipleTable"
:data="courseList"
stripe
tooltip-effect="dark"
@selection-change="handleSelectionChange"
>
icon="el-icon-edit"
@click="showEditDialog(scope.row)"
type="primary"
size="mini"
>
icon="el-icon-delete"
type="danger"
size="mini"
@click="removeCourseById(scope.row)"
>
data中定义：
//被选中的列表记录
multipleSelection: [],
//要导出的数据
excelData: [],
methods中方法：
//列表选中状态发生变化时
handleSelectionChange(val) {
this.multipleSelection = val;
},
//数据格式的转化
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
//数据写入excel
export2Excel() {
require.ensure([], () => {
const multiHeader = [
"",
"",
"",
"",
"课程信息一览表---",
"",
"",
"",
"",
"",
""
];
const tHeader = [
"课程代码",
"课程名称",
"课程类型",
"课程类别",
"课程性质",
"所属学院",
"学时",
"学分",
"课程分数"
]; // 导出的表头名信息
const filterVal = [
"code",
"name",
"courseType",
"courseCategory",
"courseNature",
"institutionName",
"classHour",
"classPoint",
"score"
]; // 导出的表头字段名，需要导出表格字段名
const list = this.excelData;
const data = this.formatJson(filterVal, list);
const merges = ["A1:I1"];
export_json_to_excel(multiHeader, tHeader, data, merges, "课程信息表"); // 导出的表格名称，根据需要自己命名
});
},
//导出---根据所选ids 导出数据&&根据高级搜索的条件导出Excel
exportFile() {
if (this.isShowSimple == true) {
if (this.multipleSelection.length == 0) {
const confirmResult = this.$confirm(
"请选择需要导出的数据！",
"提示",
{
showCancelButton: false,
type: "warning"
}
).catch(err => err);
return;
}
this.$confirm("确定下载列表文件?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.excelData = this.multipleSelection; //要导出的数据。
console.log("this.excelData:" + this.excelData);
console.log("导出的数据为：" + JSON.stringify(this.excelData));
this.export2Excel();
this.$refs.multipleTable.clearSelection();
})
.catch(() => {});
} else {
console.log("根据搜索条件打印");
if (
this.queryCourseUnion.name != "" ||
this.queryCourseUnion.institutionName != "" ||
this.queryCourseUnion.code != ""
) {
window.open(
"/api/teach/exportExcelByUnion?" +
"code=" +
this.queryCourseUnion.code +
"&" +
"institutionName=" +
this.queryCourseUnion.institutionName +
"&" +
"name=" +
this.queryCourseUnion.name
);
} else {
const confirmResult = this.$confirm(
"请输入条件选择需要导出的数据！",
"提示",
{
showCancelButton: false,
type: "warning"
}
).catch(err => err);
return;
}
}
},
5、对表格输出内容(标题级别的设置、字体、字号等单元格样式)样式设置：
可以在js源文件中进行相应的配置。【默认的源文件为：Export2Excel.js】
A4、上传错误记录下载Excel文件
场景：批量导入Excel文件时，可能存在某些记录不满足要求无法成功上传的情况，将上传失败的 记录及原因下载到Excel文件中，方便查看数据。
实现：文件上传时会把文件添加到一个数组中，数组中的每一个对象对应Excel表中一条记录。返回的数据结构为数组。
//文件上传
uploadSuccess(response, file, fileList) {
console.log("上传文件", response.data);
console.log("返回状态", response.code);
if (response.code != "0000") {
this.excelData = response.data;
this.exportErrorFile();//下载导入错误的数据Excel表，返回错误信息。【注：该项目中出错原因由后端返回，此处只接收错误数据即可】
return this.$message.error("导入失败！");
} else {
this.isShowFile = true;
return this.$message.success("导入成功！");
}
},