当前位置:   article > 正文

vue处理后端返回的文件数据流,并提供下载接口

vue处理后端返回的文件数据流,并提供下载接口
返回的数据流

前端对其进行处理并下载
  1. downloadFile(res, fileName) {
  2. // 使用后台返回的数据创建一个新的Blob对象
  3. let blob = new Blob([res]);
  4. // 如果fileName参数未定义或为空,则从res的headers中获取'content-disposition'字段,并从中提取文件名
  5. if (!fileName) {
  6. fileName = res.headers['content-disposition'].split('filename=').pop();
  7. }
  8. // 检查当前浏览器是否支持msSaveOrOpenBlob方法(这是旧版IE浏览器特有的API)
  9. if ('msSaveOrOpenBlob' in navigator) {
  10. // 如果支持,使用该方法下载文件,参数为Blob对象和文件名
  11. window.navigator.msSaveOrOpenBlob(blob, fileName);
  12. } else {
  13. // 如果不支持,则创建一个新的a元素并隐藏它
  14. const elink = document.createElement('a');
  15. // 设置a元素的download属性为文件名,这使得点击a元素时开始下载文件
  16. elink.download = fileName;
  17. // 隐藏a元素,使其在页面上不可见
  18. elink.style.display = 'block';
  19. // 创建一个指向Blob对象的URL,并设置为a元素的href属性,这样a元素就可以下载该Blob对象表示的文件了
  20. elink.href = URL.createObjectURL(blob);
  21. // 将a元素添加到文档的body中,使其可见并可以被点击
  22. document.body.appendChild(elink);
  23. // 模拟点击a元素,开始下载文件
  24. elink.click();
  25. // 释放之前为Blob对象创建的URL,以释放内存
  26. URL.revokeObjectURL(elink.href);
  27. // 从文档的body中移除a元素,清理内存
  28. document.body.removeChild(elink);
  29. }
  30. },

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

闽ICP备14008679号