业务需求：

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、业务代码编写：
组件引入：

<!-- 课程数据列表 --><el-tableref="multipleTable":data="courseList"stripetooltip-effect="dark"@selection-change="handleSelectionChange"><el-table-column type="selection" width="50"></el-table-column><el-table-column fixed sortable prop="code" width="120" label="课程代码"></el-table-column><el-table-column prop="name" show-overflow-tooltip label="课程名称"></el-table-column><el-table-column prop="courseType" label="课程类型" show-overflow-tooltip></el-table-column><el-table-column prop="courseCategory" label="课程类别"></el-table-column><el-table-column prop="courseNature" label="课程性质"></el-table-column><el-table-column prop="institutionName" label="所属学院" show-overflow-tooltip></el-table-column><el-table-column prop="classHour" label="学时"></el-table-column><el-table-column prop="classPoint" label="学分"></el-table-column><el-table-column prop="score" label="课程分数"></el-table-column><el-table-column label="操作" width="190"><template slot-scope="scope"><el-tooltip effect="dark" content="修改" placement="top" :enterable="false"><!-- 编辑删除内容 绑定id（scope.row.id 方法中传递参数id） --><el-buttonicon="el-icon-edit"@click="showEditDialog(scope.row)"type="primary"size="mini"></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false"><el-buttonicon="el-icon-delete"type="danger"size="mini"@click="removeCourseById(scope.row)"></el-button></el-tooltip></template></el-table-column></el-table>

data中定义：

   //被选中的列表记录multipleSelection: [],//要导出的数据excelData: [],

methods中方法：

//列表选中状态发生变化时handleSelectionChange(val) {this.multipleSelection = val;},//数据格式的转化formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]));},//数据写入excelexport2Excel() {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 导出数据&&根据高级搜索的条件导出ExcelexportFile() {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("导入成功！");}},

vue中如何进行Excel文件的下载相关推荐

Asp.net生成Excel文件并下载（解决使用迅雷下载页面而不是文件的问题）
这里采用的是在服务端先生成Excel文件,然后利用文件地址下载的方法. 先试用Response.WriteFile的方法: FileInfo fi = new FileInfo(excelFile); ...
【原】Asp.net生成Excel文件并下载（更新：解决使用迅雷下载页面而不是文件的问题）...
这里采用的是在服务端先生成Excel文件,然后利用文件地址下载的方法. 生成Excel文件的方法,见:[原].Net创建Excel文件(插入数据.修改格式.生成图表)的方法先试用Response.W ...
java迅雷下载excel,Asp.net生成Excel文件并下载（更新：解决使用迅雷下载页面而不是文件的问题）...
(一) 如果在迅雷的下载对话框中点取消,则会使用IE的下载,这里的文件又是正确的了: 怀疑迅雷是根据下载对话框中的网址重新请求下载,与发起请求的页面已经无关,而IE又不会把ViewState信息传到迅 ...
Asp.net生成Excel文件并下载（更新：解决使用迅雷下载页面而不是文件的问题）...
这里采用的是在服务端先生成Excel文件,然后利用文件地址下载的方法. 生成Excel文件的方法,见:[原].Net创建Excel文件(插入数据.修改格式.生成图表)的方法先试用Response.W ...
【100个 Unity小知识点】☀️ | Unity 中怎样读取Excel文件
Unity 小科普老规矩,先介绍一下 Unity 的科普小知识: Unity是实时3D互动内容创作和运营平台 . 包括游戏开发.美术.建筑.汽车设计.影视在内的所有创作者,借助 Unity 将创意 ...
easyexcel导入时读不到数据_SpringBoot中EasyExcel实现Excel文件的导入导出
前言在我们日常的开发过程中经常会使用Excel文件的形式来批量地上传下载系统数据,我们最常用的工具是Apache poi,但是如果数据到底上百万时,将会造成内存溢出的问题,那么我们怎么去实现百万数据 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
Asp.net输出Excel文件并且下载该文件以及某些细节问题解决
使用asp.net输出Excel文件并且下载,网上资源很多我也是参照网上资源写的简单流程,就是页面上方一个datagrid控件或者gridview控件,后来绑定数据到控件上,然后输出控件呈现的ht ...
Java面试poi中excel版本大小_java 中 poi解析Excel文件版本问题解决办法
java 中 poi解析Excel文件版本问题解决办法发布时间:2020-10-02 03:46:15 来源:脚本之家阅读:91 作者:程诺 poi解析Excel文件版本问题解决办法 poi解析E ...

vue中如何进行Excel文件的下载

文章目录