当前位置:   article > 正文

模拟a标签实现下载,文件下载通过Blob对象实现_模拟a链接下载

模拟a链接下载

因为后端接口返回数据直接是文件的原因,并不会触发浏览器的下载。问题是AJAX并不会换起浏览器的下载窗口,AJAX设计的初衷就是用来实现异步刷新的,用以改善原始的form表单提交刷新页面的问题。

参考方式如下:

  1. Download(id) {
  2. ImageServices.DownloadImage(id).then(res => {
  3. if (res) {
  4. const content = res;
  5. // content可以是一个对象,也可以是一个数组。通过id调用返回的是一个对象,所以用第一种写法
  6. // 第一种 content是对象的,则用new Blob([content])
  7. const blob = new Blob([content]);
  8. // 第二种 content是数组,则用new Blob([JSON.stringify(content)]);
  9. //const blob = new Blob([JSON.stringify(content)]);
  10. const fileName = '文件名称';
  11. if ('download' in document.createElement('a')) { // 非IE下载
  12. const elink = document.createElement('a');
  13. elink.download = fileName
  14. elink.style.display = 'none';
  15. elink.href = URL.createObjectURL(blob);
  16. document.body.appendChild(elink);
  17. elink.click();
  18. URL.revokeObjectURL(elink.href); //释放URL对象
  19. document.body.removeChild(elink);
  20. }
  21. }
  22. }).catch(err => {
  23. console.log(err)
  24. })
  25. }
  26. }

这里用了Blob对象,该写法的意思是用从服务器接收到的文件流创建了一个blob对象,并使用该blob创建一个指向类型数组的URL,将该url作为a标签的链接目标,然后去触发a标签的点击事件从而实现下载功能。

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

闽ICP备14008679号