后端返回字节流，前端下载图片，pdf和excel的处理

最新推荐文章于 2025-06-19 11:49:59 发布

原创最新推荐文章于 2025-06-19 11:49:59 发布 · 3.8k 阅读

9 ·

CC 4.0 BY-SA版权

前端相关专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Blob对象的基本概念，包括如何使用Blob创建URL，从Blob中提取数据，以及Blob与Base64之间的相互转换方法。此外，还提供了从接口获取的数据（如图片、PDF和Excel）进行下载的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 Blob简介

	 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件

1：使用 Blob 创建一个指向类型化数组的URL

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"});// 传入一个合适的MIME类型
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它，比如用在img.src上。

2:从 Blob 中提取数据

从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取：

 var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result 包含转化为类型数组的blob
});
reader.readAsArrayBuffer(blob);

2、base64和Blob的相互转换

1:base64->Blob

dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
  return new Blob([u8arr], { type: mime });

2:Blob->base64

 blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}

3:下载图片，pdf,excel方法

通过接口请求回来的数据是：JVBERi0xLjcKCjQgMCBvYmoKPDwKL...(base64字节流)
Type(图片对应的常用类型):
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

const bytes=JVBERi0xLjcKCjQgMCBvYmoKPDwKL...
const imgeType=image/png或者application/pdf或者application/x-msdownload（application/vnd.ms-excel）
const name=下载的附件名称


downloadBase64Blob = (bytes,imgeType,name="下载") =>{
  let blob = this.dataURLtoBlob(`data:${imgeType};base64,${bytes}`)
  const a = document.createElement('a');
  const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download= name;
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
};
dataURLtoBlob=(dataurl)=>{
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}