码迷,mamicode.com
首页 > 其他好文 > 详细

前端如何处理后台返回的文件流

时间:2021-06-04 18:53:24      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:设置   type   else   ons   set   end   ade   win   down   

前端如何处理后台返回的文件流?

处理方法:可以通过转化为blob对象的方式处理,具体方法如下:

1、在请求后台接口时需要把responseType设置为blob格式。

2、前端把后台返回的文件流转化为blob对象,然后利用window.URL.createObjectURL把blob对象转化为url,然后利用a标签进行下载。

放码过来:

downloadBlobFile(data, name) {
    if (window.navigator.msSaveOrOpenBlob) {
      // 兼容IE
      try {
        var blobObject = new Blob([encodeURI(data)]);
        window.navigator.msSaveOrOpenBlob(blobObject, fileName);
      } catch (e) {
        console.log(e);
      }
    } else {
      var blob = new Blob([data], {
        type: "application/octet-stream;charset=UTF-8"
      });
      var downloadElement = document.createElement("a");
      // 下载的文件名
      downloadElement.download = name;
      // 创建下载的链接
      downloadElement.href = window.URL.createObjectURL(blob); 
      // 点击下载
      downloadElement.click();
      document.body.appendChild(downloadElement);
      // 下载完成移除元素
      document.body.removeChild(downloadElement); 
       // 释放掉blob对象
      window.URL.revokeObjectURL(downloadElement.href);
    }
  }

  

前端如何处理后台返回的文件流

标签:设置   type   else   ons   set   end   ade   win   down   

原文地址:https://www.cnblogs.com/brucefq/p/14847126.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!