引言
最近项目遇到一个需求，每次都需要根据检索条件将后端请求到的数据在前端进行表格的动态生成展示，并能够点击按钮，实现文件的下载功能，导出为Excel表格。效果如下：
1. 表格数据展示
表格展示主要利用element-ui中的table表格，把返回的数据处理成el-table需要的格式即可。
<el-table :data="returnData" border tooltip-effect="dark" style="width: 100%;" :span-method="objectSpanMethod" :height="tableHeight" :row-style="{ height: '0px' }" :cell-style="{ padding: '1px' }" :header-row-style="{ height: '0px' }" :header-cell-style="{ padding: '1px' }" > <el-table-column prop="name" label="要素" width="120px" fixed ></el-table-column> <el-table-column prop="level" label="高度" width="60px"> </el-table-column> <el-table-column v-for="col in timeList" :show-overflow-tooltip="true" :prop="col" :label="col" :key="col" width="70px" > </el-table-column> </el-table>
2. 文件下载功能
文件下载功能通过向后端发送特定的请求参数来获取相应文件，使用ResponseType Blob来实现文件下载。
2.1 获取Blob对象
为了下载Excel文件，需要先获取到对应的Blob对象。使用axios向服务器发送POST请求，并获取返回的Blob对象。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。
downloadFile(data) { axios({ method: "post", url: `http://${globeInterfaceIp}/api02/getExcel`, data: data,//将数据发送给后端，后端根据数据返回相应文件 headers: { "Content-Type": "application/json", //客户端告诉服务器请求体数据的格式是JSON }, responseType: "blob", //服务器响应的数据类型为blob }) .then((res) => { const blob = res.data; //获取返回的Blob对象 console.log(blob); }) .catch((error) => { console.log(error); }); }
这里的type: 'application/vnd.ms-excel’代表Blob 对象所包含数据的类型为excel文件。
后端代码
主要就是生成相应Excel文件，并设置输出文件类型为excel文件。
2.2 实现Excel文件下载
在获取到Blob对象之后，就可以实现文件的下载。具体来说，就是创建一个a标签，并设置其href属性为一个包含Blob对象的URL，然后模拟用户点击该链接的行为，就可以触发文件下载功能了。
downloadFile(data) { axios({ method: "post", url: `http://${globeInterfaceIp}/api02/getExcel`, data: data,//将数据发送给后端，后端根据数据返回相应文件 headers: { "Content-Type": "application/json", //客户端告诉服务器请求体数据的格式是JSON }, responseType: "blob", //服务器响应的数据类型为blob }) .then((res) => { const blob = res.data; //获取Blob对象 const elink = document.createElement("a");// 创建一个超链接对象实例 const fileName = this.store.getters.getDate + this.store.getters.getHour + ".xls";//Excel文件名 elink.download = fileName;// 设置要下载的文件的名称 elink.href = URL.createObjectURL(blob);//设置a标签的href属性为一个包含Blob对象的URL document.body.appendChild(elink); elink.click();// 触发超链接的点击事件 URL.revokeObjectURL(elink.href); // 释放URL 对象 document.body.removeChild(elink);// 移除超链接对象实例 }) .catch((error) => { console.log(error); }); }
