如何将从 reactjs 中的 nodejs 后端接收到的 Blob 下载到 ReactJS 中的任何操作系统？答案

【问题标题】：How to download the Blob received from the nodejs backend in reactjs to any Operating System in ReactJS?如何将从 reactjs 中的 nodejs 后端接收到的 Blob 下载到 ReactJS 中的任何操作系统？
【发布时间】：2023-03-17 23:28:01
【问题描述】：

我正在开发一个 ReactJS 网络应用程序，后端服务器在 API 响应中发送 blob 对象。下载文件时，问题是文件被下载但文件的内容只是[object Object]。后端发送的 blob 是这样的：

{ 
     success: true,
     message: 'Blob retrived successfully',
     blob:
      Blob {
        [Symbol(type)]: 'text/html',
        [Symbol(buffer)]:
         <Buffer 0a 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0a 3c 68 74 6d 6c 20 6c 61 6e 67 3d 22 65 6e 22 20 78 6d 6c 3a 6c 61 6e 67 3d 22 65 6e 22 20 78 6d 6c ... > },
     name: 'newfile123.html' 
}

这是我在 ReactJS 前端尝试过的：

const blob = new Blob([response.data.blob]);
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.setAttribute('download', name);
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);

link.setAttribute 中的名称是在访问 API 之前获取的，所以没有问题。

【问题讨论】：

从哪里得到“后端发送的 blob 是这样的”中的输出？从 Node.js 控制台，还是在您的浏览器中？
是的，我是从 nodejs 控制台获取的
对。因此，您不知道通过网络发送的内容。我碰巧知道——Node.js 原生 Buffer 变成了字符串表示，"[object Object]"。正如我的回答所说，您需要在后端对其进行编码。你不能单独在前端解决这个问题。
如果您在浏览器的网络检查器中查看响应正文，我会打赌您会在那里看到"[object Object]" 字符串，所以您知道这是来自后端。
好吧，那时我的赌注有点错误:)——但关键是，特殊的 Blob 对象被编码为基本的空对象。这必须在后端修复。

标签： node.js blob

【解决方案1】：

您不能直接在 JSON API 响应中发送 Blob（或任何其他二进制数据）。

您需要在服务器上以某种方式对其进行编码（base64 是二进制数据最有效的通用编码），然后在客户端对其进行解码。

【讨论】：

有没有办法做到这一点？
我不是发blob，后端代码是别人开发的。
您需要告诉后端人员修复他们的代码以对 blob 进行编码。你不能在不编码的情况下通过网络发送 Node.js blob/buffer。