项目采用前后端分离策略搭建,后端使用SpringBoot+SpringMVC,前端使用vue+elementui,采用restful风格进行数据传输,此篇文章不介绍后端代码
首先封装导出数据api
新建一个文件,文件中放的是所有的接口信息,api写法和其他的并无异处,只是多了一个responseType
import http from '@/axios';
/**
* 查询作业队上报的表单列表
* @param params 查询条件
* @return
*/
export function findTeamReportList(params){
return http.get(`/form/report`,{params:params});
}
/**
* 导出表单数据
* @param formType 表单类型
* @param formId 表单id
*/
export function exportFormData(formType,formId){
return http.get(`/form/export/${formType}/${formId}`,{responseType:'blob'});
}
写一个解析返回数据的方法
由于项目中很多地方都用到了下载文件功能,所以将方法写成一个公共的,使用时候调用就可以了,在main.js添加方法
Vue.prototype.getFileFromResponse = function (response) {
try {
let disposition = response.headers['content-disposition'];//获取content-disposition
let fileInfo = disposition ? disposition.substr(disposition.indexOf('filename')) : '';
let fileName= fileInfo?fileInfo.split('=')[1]:'';
if(!fileName.substr(fileName.indexOf('.'))) {
this.$notify({
title: '提示',
message: '暂时没有您想要的数据',
type: 'error'
});
return;
}
//处理二进制流文件
var blob = new Blob([response.data], {type: 'application/x-download;charset=utf-8'});
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = decodeURIComponent(fileName.replace(/\"/g,'')); //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}catch (e) {
throw e;
}
};
点击按钮导出数据
点击导出按钮后,调用方法导出数据,下面代码中的formAPI是引用的最开始的api文件
//导出表单数据
exportForm(row) {
let formType=row.type;
let formTypeFormatted=formType==='parkType-1' ? 'culture' : formType === 'parkType-2' ? 'visitor' : 'flower';
formAPI.exportFormData(formTypeFormatted,row.id).then(response => {
this.getFileFromResponse(response);
}).catch(err => {
this.$notify({
title: this.$t('msg.title'),
message: this.getErr(err),
type: 'error',
duration: 2000
})
})
}
通过api方法发送到后台后,后台处理完毕将返回的response信息通过方法处理后就会开始下载文件
可以看到二进制流文件已经正确返回,这时文件也已经下载完毕
该方法出现的问题
这种方法虽然可以实现带登录信息下载文件的需求,但是当使用手机浏览器进行下载的时候会出现无法下载的情况,目前本人并不知道如何解决手机下载的问题,好在我们项目没有手机浏览下载的要求,如果有此需求的coder请酌情使用,如果有解决方法也请留言告知一下