一文搞懂前端blob图片下载

背景介绍

后端给前端传输文件时有三种方式：

1.  blob流
2.  图片地址(传到阿里云或者华为云oss存储，会生成一个图片地址)
3.  base64

Blob是什么

Blob（Binary Large Object）是一种表示二进制数据的对象类型。Blob 对象通常用于存储大量的二进制数据，比如图片、音频、视频。

代码实现

1.当后端设置了 HTTP 响应头部Content-Disposition为attachment时（attachment 表示告诉浏览器应该下载响应，而不是在浏览器中打开它），下面的方法直接就可以下载文件。

const DownLoadQrCode = async (id) => {
    requestUrl = ''; //这里设置你的请求地址
    window.location.href = `${requestUrl}?id=${id}&token=${localStorage.getItem('token')}`
}

2.当后端没有设置HTTP 响应头部Content-Disposition为attachment时，下面的方法中有三种情况，type为download时可以下载文件，type为raw时可以拿到blob二进制源文件，type为其他时可以拿到url，这个url放到img标签的url中就可以绘制这张图片。

const [qrCodeUrl, setQrCodeUrl] = useState('');
...
const getQRCode = async () => {
    const id = ''; // 请求参数
    const token = ''; // 请求参数
    const requestUrl = ''; // 请求地址
    const res = await getBlobFile(`${requestUrl}?id=${id}&token=${token}`)
    setQrCodeUrl(res);
}
...
<img src={qrCodeUrl} alt="二维码" width={'150px'} />
...
export const getBlobFile = async (url, type) => {
  return await fetch(url).then((res) => {
    if (res.status !== 200) return
    // 从这个响应对象中获取响应体的二进制数据，返回一个 Blob 对象
    return res.blob();
  }).then((blob) => {
    
    if (type === "download") {
      // 创建一个 DOMString，其中包含一个表示参数中传入的 Blob 对象的 URL
      const blobUrl = URL.createObjectURL(blob);
      // 创建一个a标签元素用于模拟下载，并设置相关属性
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = blobUrl;
      // 设置下载文件的名称
      a.download = 'file.png';
      // 将a标签添加到文档中
      document.body.appendChild(a);
      // 模拟点击a标签实现下载
      a.click();
      // 释放blobUrl对象
      URL.revokeObjectURL(blobUrl);
    } else if (type === "raw") {
      // blob二进制流源文件
      return blob
    } else {
      //创建一个 DOMString，其中包含一个表示参数中传入的 Blob 对象的 URL
      const blobUrl = URL.createObjectURL(blob);
      // 这个url直接放在img的src下可以直接用
      return blobUrl;
    }
  });
};