前端使用Blob或者FileReader对象下载后端返回的二进制文件_TangAcrab的博客-程序员宅基地

技术标签: blob  前端下载  二进制下载  日常报错解决  

有时候当后端返回的响应体是二进制时,网关(gateway)会将response进行截断尝试转成json,从而导致下载或者导出的文件有问题一直打不开或者乱码。这种情况请后端解决或者放开一个请求白名单;

当下载或者导出后端返回时二进制文件时,前端可利用Blob或者FileReaderd对象来进行处理下载:

发送请求时responseType设置为'blob'或者'arraybuffer' 例如:

在这里插入图片描述

  1. 使用Bolb:
function downLoadFileByBlob(res){
     // 这里res是axios的所有返回结果
	const {
     data, headers } = res
	const fileType = headers["content-type"]; // 文件类型
	const fileName = decodeURI(headers["content-disposition"]).split(";")[1].split("=")[1]; // 文件名称
	// 创建a标签模拟点击
	const url = window.URL.createObjectURL(new Blob([data],{
    type:fileType})); // 注意第一个参数是数组形式
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', filename)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
	
}
  1. 使用FileReader对象:
function downLoadByFileReader(res){
    
  try {
    
    const blob = new Blob([res.data], {
    
      type: res.headers["content-type"]
    });
    const filename = decodeURI(res.headers["content-disposition"]).split(";")[1].split("=")[1];
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = (e) => {
    
      const a = document.createElement('a');
      a.download = filename;
      a.href = e.target.result;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  } catch (error) {
     
  }
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39786582/article/details/109800775

智能推荐

随便推点