Node/Express中从JSON生成Blob数据，前端接收为空的问题求助

Node.js环境中的Blob（无论是buffer模块的还是其他实现）本质上是基于Buffer的封装，但当你通过res.send()将其作为JSON对象的一部分返回时，JSON序列化无法正确处理Blob的内部数据，最终前端只能拿到空对象{}。

不需要在后端创建Blob，直接给前端返回JSON数据或Buffer，让前端自行生成Blob，或者后端直接返回文件流触发浏览器下载。

方案1：后端返回JSON字符串，前端生成Blob并下载 #

后端代码：

const myJsonFileData = { "id": 1, "name":"abc"};
return res.send({
  filename: 'xxx.json',
  data: JSON.stringify(myJsonFileData, null, 2)
});

前端处理代码：

// 假设res是后端返回的响应数据
const { filename, data } = res.data;
const blob = new Blob([data], { type: 'application/json;charset=utf-8' });
// 创建下载链接
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);

方案2：后端直接返回文件流，触发浏览器下载 #

如果不需要前端额外处理，直接让浏览器下载文件更高效：

const myJsonFileData = { "id": 1, "name":"abc"};
const jsonStr = JSON.stringify(myJsonFileData, null, 2);

// 设置响应头，告知浏览器这是下载文件
res.setHeader('Content-Disposition', `attachment; filename="xxx.json"`);
res.setHeader('Content-Type', 'application/json;charset=utf-8');
// 直接发送JSON字符串
res.send(jsonStr);

这种方式下前端会直接触发文件下载，无需手动处理Blob。

方案3：后端返回Base64编码的Buffer，前端转Blob #

如果必须传输二进制数据：
后端代码：

const myJsonFileData = { "id": 1, "name":"abc"};
const jsonStr = JSON.stringify(myJsonFileData, null, 2);
const buffer = Buffer.from(jsonStr, 'utf8');

return res.send({
  filename: 'xxx.json',
  buffer: buffer.toString('base64') // 转Base64字符串传输
});

前端处理代码：

const { filename, buffer } = res.data;
const byteCharacters = atob(buffer);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/json;charset=utf-8' });
// 后续下载逻辑同方案1

你使用的buffer.Blob是Node.js环境的专属实现，和浏览器端Blob结构差异极大。当你把它放入res.send()的响应对象中时，JSON序列化只会处理其可枚举属性，而Blob的内部数据是不可枚举的，因此前端收到的只能是空对象。

内容的提问来源于stack exchange，提问作者micronyks