当前位置:   article > 正文

原生JS通过XMLHttpRequest请求文件流下载文件时获取文件名称

原生JS通过XMLHttpRequest请求文件流下载文件时获取文件名称

背景:后台请求文件接口返回的是文件流Stream,可是不知道怎么获取这个文件流文件的名字;在swagger或者postman中请求接口时,文件名称也是乱码

解决 :

1. 使用XMLHttpRequest去请求文件流,并在页面导出

2. 在XMLHttpRequest请求的响应结果中需要判断响应是否是希望获得的文件类型

3. 通过查看XMLHttpRequest的响应内容时,发现是有文件名称的,可以通过正则等一系列寻找找出来

4. 将流对象创建成下载链接,并将文件名称赋值到download上

5. 模拟点击链接,下载文件,这样下载下来的文件名称也是后台给这个文件命名的名字了

  1. //以导出pdf为例
  2. function downloadFile (id) {
  3. var xhr = new XMLHttpRequest();
  4. var formData = new FormData();
  5. //添加请求文件时的请求参数
  6. formData.append('id', id);
  7. xhr.open("post", '/api/xxx/GetFile', true);
  8. //xhr.setRequestHeader('token', localStorage.token);
  9. xhr.send(formData);
  10. xhr.responseType = "blob";
  11. xhr.onload = function () {
  12. if (this.status == 200) {
  13. var filename = '';
  14. var blob = this.response;
  15. var response_type = xhr.response.type;
  16. if (response_type.indexOf('pdf') < 0) {
  17. var reader = new FileReader();
  18. reader.onload = function (event) {
  19. var content = event.target.result;
  20. alert('返回内容不是pdf')
  21. };
  22. reader.readAsText(blob);
  23. } else {
  24. //获取pdf文件名称
  25. var disposition = decodeURIComponent(xhr.getResponseHeader('Content-Disposition'));
  26. if (disposition && disposition.indexOf('attachment') !== -1) {
  27. var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
  28. var matches = filenameRegex.exec(disposition);
  29. if (matches != null && matches[1]) {
  30. filename = matches[1].replace(/['"]/g, '');
  31. }
  32. }
  33. var downloadElement = document.createElement('a');
  34. var href = window.URL.createObjectURL(blob); //创建下载的链接
  35. downloadElement.href = href;
  36. downloadElement.download = filename || 'report'; //下载后文件名
  37. document.body.appendChild(downloadElement);
  38. downloadElement.click(); //点击下载
  39. document.body.removeChild(downloadElement); //下载完成移除元素
  40. window.URL.revokeObjectURL(href); //释放掉blob对象
  41. }
  42. } else {
  43. alert('下载失败');
  44. }
  45. };
  46. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/421642
推荐阅读
相关标签
  

闽ICP备14008679号