赞
踩
背景:后台请求文件接口返回的是文件流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('下载失败');
- }
- };
- }

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。