管理平台经常会遇到导出报表的功能，总结下实现方式。
平台返回下载链接
最简单的处理方式：
window.open(url,'_blank')- a标签下载
<a href="xxx/xxx/xx.xx" download="filename">
const ele = document.createElement('a');
ele.setAttribute('href',res.url); //设置下载文件的url地址
ele.setAttribute('download' , 'download');//用于设置下载文件的文件名
ele.click();
平台返回文件流
-
form表单方式
/**
*@param {[url]} url [get请求的url地址]
*@param {[Object]} data [请求参数：{name:value , name2:value2 , name3:value3}]
*/
function downLoadFile(url , data){
var $form = $('<form method="post" style="display:none" target="_blank"/>');
$form.attr('action', url); //设置get的url地址
for (var key in data) {//设置请求的参数
$form.append('<input type="hidden" name="' + key + '" value="' + data[key] + '" />');
}
$form.appendTo('body').sumbit().remove();
}
-
Blob对象下载
有些情况使用form表单方式导出，比如下载接口需要header鉴权。
此时可以使用该导出方式。
function exportFileBlob(url,data,success,error){
var request = new XMLHttpRequest();
request.open('POST',Config.serverBase+url);
request.onreadystatechange = function () {
if(request.readyState === 4 ){
if(request.status===Status.OK){
success(request.response);
}else{
error()
}
}
};
request.setRequestHeader('Content-Type','application/json');
request.setRequestHeader('token',window.localStorage.getItem("hjqman-token")?window.localStorage.getItem("hjqman-token"):"");
request.responseType = "blob";
request.send(data);
}
function success (response){
const blob = new Blob([response]);
const fileName = '应用号列表'+moment().format('YYYYMMDD')+'.xls';
if ('download' in document.createElement('a')) {
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
let url = URL.createObjectURL(blob);
elink.href = url;
document.body.appendChild(elink);
elink.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(elink);
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}
注意点：
- 如果用Axios可以直接设置
responseType: blob,但是AJAX未封装该参数，所以需要用XMLHttpRequest。
image.png
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType -
URL.createObjectURL(blob)可以获取当前文件的一个内存URL,同步执行，createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/revokeObjectURL
