vue中后端做Excel导出功能返回数据流前端的处理操作
项⽬中有⼀个导出功能的实现，⽤博客来记录⼀下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，⽽且后端返回的是数据流，所以需要处理成想要的表格并导出来。
先看下效果图：
页⾯效果：
点击导出Excel 调⽤导出接⼝成功了：
后台返回的数据流，⼀堆看不懂的乱码：
接下来要处理这堆乱码，因为⽤到的地⽅多，所以在util.js⽂件⾥封装了⼀个公共⽅法并抛出：
虽然vue⾥有封装好的请求接⼝的⽅法，但这⾥要单独⽤axios，所以先在util.js⾥引⼊axios
import axios from 'axios'
// 导出Excel公⽤⽅法
export function exportMethod(data) {
axios({
method: hod,
url: `${data.url}${data.params ? '?' + data.params : ''}`,
responseType: 'blob'
}).then((res) => {
const link = ateElement('a')
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
link.style.display = 'none'
link.href = ateObjectURL(blob)
// link.download = res.headers['content-disposition'] //下载后⽂件名
link.download = data.fileName //下载的⽂件名
write的返回值
document.body.appendChild(link)
link.click()
veChild(link)
}).catch(error => {
this.$({
title: '错误',
desc: '⽹络连接错误'
})
console.log(error)
})
}
在使⽤的页⾯中引⼊⽅法：
import { exportMethod } from '@/libs/util'
在methods导出的⽅法⾥，调⽤共⽤导出⽅法。
注意：因为我们后台⽤的是get⽅法，所以传递get请求并且拼接要传的参数，如果是post请求，就把传递的get改成post，传递数据改成传data数据对象，params去掉，公共⽅法⾥把url上拼接的参数也去掉，直接接收url路径即可，再接收⼀个data就⾏了
// 导出会诊接诊量统计表
exportDepReceRank() {
let myObj = {
method: 'get',
url: exportDepartmentRankUrl,
fileName: 'XX医院—各科室会诊接诊量统计',
params: `startDate=${changeDate(this.dateValue[0])}&endDate=${changeDate(this.dateValue[1])}`
}
exportMethod(myObj)
},
最后成功导出Excel的效果图：
补充知识：Vue项⽬利⽤axios请求接⼝下载excel（附前后端代码）
据我了解的前端的下载⽅式有三种，第⼀种是通过a标签来进⾏下载，第⼆种时候通过window.location来下载，第三种是通过请求后台的接⼝来下载，今天就来记录⼀下这三种下载⽅式。
⽅法⼀：通过a标签
// href为⽂件的存储路径或者地址，download为问⽂件名
<a href="/images/logo.jpg" rel="external nofollow" download="logo" />
优点：简单⽅便。
缺点：这种下载⽅式只⽀持Firefox和Chrome不⽀持IE和Safari，兼容性不够好。
⽅法⼆：通过window.location
window.location = '127.0.0.1:8080/api/download?name=xxx&type=xxx'
优点：简单⽅便。
缺点：只能进⾏get请求，当有token校验的时候不⽅便。
⽅法三：通过请求后台接⼝
// download.js
import axios from 'axios'
export function download(type, name) {
axios({
method: 'post',
url: '127.0.0.1:8080/api/download',
// headers⾥⾯设置token
headers: {
loginCode: 'xxx',
authorization: 'xxx'
},
data: {
name: name,
type: type
},
// ⼆进制流⽂件，⼀定要设置成blob，默认是json
responseType: 'blob'
}).then(res => {
const link = ateElement('a')
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = ateObjectURL(blob)
link.setAttribute('download', `${name}.xlsx`)
document.body.appendChild(link)
link.click()
veChild(link)
})
}
// download.java
@RequestMapping(value = "/api/download",produces = "application/octet-stream", method = RequestMethod.POST)
public void downloadTemplate(@RequestBody Map<String,Object> paramsMap, HttpServletResponse response) {
try {
if (("type").equals("xxx") && ("name").equals("xxx")) {
String[] str = new String[]{"区县","所属省份","所属地市"};
Workbook workbook = portExcel("⾏政区划表模版", str, null, "yyyy-MM-dd");
download(response, workbook, "CityDict");
}
} catch (Exception e) {
e.printStackTrace();
}
}
private void download(HttpServletResponse response, Workbook workbook, String fileName) {
try {
response.setContentType("application/octet-stream;charset=UTF-8;");
response.addHeader("Content-Disposition", "attachment;fileName=" + fileName + ".xlsx");
ByteArrayOutputStream by = new ByteArrayOutputStream();
OutputStream osOut = OutputStream();
// 将指定的字节写⼊此输出流
workbook.write(osOut);
// 刷新此输出流并强制将所有缓冲的输出字节被写出
osOut.flush();
// 关闭流
osOut.close();
} catch (IOException e) {
}
}
优点：可以在headers⾥⾯设置token，⽂件是java代码中⽣成的，⽣成的⽂件⽐较灵活。
缺点：实现起来⽐较复杂。
以上这篇vue中后端做Excel导出功能返回数据流前端的处理操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。