背景:后台请求文件接口返回的是文件流stream,可是不知道怎么获取这个文件流文件的名字;在swagger或者postman中请求接口时,文件名称也是乱码
解决 :
1. 使用xmlhttprequest去请求文件流,并在页面导出
2. 在xmlhttprequest请求的响应结果中需要判断响应是否是希望获得的文件类型
3. 通过查看xmlhttprequest的响应内容时,发现是有文件名称的,可以通过正则等一系列寻找找出来
4. 将流对象创建成下载链接,并将文件名称赋值到download上
5. 模拟点击链接,下载文件,这样下载下来的文件名称也是后台给这个文件命名的名字了
//以导出pdf为例
function downloadfile (id) {
var xhr = new xmlhttprequest();
var formdata = new formdata();
//添加请求文件时的请求参数
formdata.append('id', id);
xhr.open("post", '/api/xxx/getfile', true);
//xhr.setrequestheader('token', localstorage.token);
xhr.send(formdata);
xhr.responsetype = "blob";
xhr.onload = function () {
if (this.status == 200) {
var filename = '';
var blob = this.response;
var response_type = xhr.response.type;
if (response_type.indexof('pdf') < 0) {
var reader = new filereader();
reader.onload = function (event) {
var content = event.target.result;
alert('返回内容不是pdf')
};
reader.readastext(blob);
} else {
//获取pdf文件名称
var disposition = decodeuricomponent(xhr.getresponseheader('content-disposition'));
if (disposition && disposition.indexof('attachment') !== -1) {
var filenameregex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameregex.exec(disposition);
if (matches != null && matches[1]) {
filename = matches[1].replace(/['"]/g, '');
}
}
var downloadelement = document.createelement('a');
var href = window.url.createobjecturl(blob); //创建下载的链接
downloadelement.href = href;
downloadelement.download = filename || 'report'; //下载后文件名
document.body.appendchild(downloadelement);
downloadelement.click(); //点击下载
document.body.removechild(downloadelement); //下载完成移除元素
window.url.revokeobjecturl(href); //释放掉blob对象
}
} else {
alert('下载失败');
}
};
}
发表评论