如何使用JavaScript从Azure Blob Storage字符串流内容下载PNG文件

你只需要调整响应头配置、去掉base64转码逻辑即可实现浏览器自动触发下载，修改后的代码如下：

async function streamToString(readableStream) {
  return new Promise((resolve, reject) => {
    const chunks = [];
    readableStream.on("data", (data) => {
      chunks.push(data.toString());
    });
    readableStream.on("end", () => {
      resolve(chunks.join(""));
    });
    readableStream.on("error", reject);
  });
}

if (type == "download") {
  const name = req.query.name || req.body.name;
  const itemname = req.query.itemname || req.body.itemname;
  var container = name ? name : "securesharecc";
  const containerClient = await blobServiceClient.getContainerClient(container);
  const blobName = itemname ? itemname : "sample.png";
  const blockBlobClient = containerClient.getBlockBlobClient(blobName);
  const downloadBlockBlobResponse = await blockBlobClient.download(0);
  console.log("\nDownloaded blob content...");
  // 直接配置响应头触发下载
  context.res = {
    // 直接传入可读流作为响应体
    body: downloadBlockBlobResponse.readableStreamBody,
    headers: {
      "Content-Type": "image/png",
      // 配置attachment模式，指定下载文件名，触发自动下载
      "Content-Disposition": `attachment; filename="${blobName}"`
    }
  };
  context.done();
}

核心修改点 #

• 移除了流转base64字符串的逻辑，既减少了内存占用，也避免了转码导致的文件损坏风险
• 新增两个关键响应头：
  • Content-Type：声明返回资源为PNG格式图片，符合浏览器资源识别规范
  • Content-Disposition：设置为attachment模式，同时指定下载后的文件名，会直接触发浏览器的下载行为，不会在页面上展示文件内容
• 响应体直接传入Azure Blob返回的可读流，无需封装为JSON结构，传输效率更高

如果需要适配多种文件格式，可以额外调用blockBlobClient.getProperties()获取Blob本身存储的Content-Type属性，动态设置响应头即可，不需要硬编码为image/png。

内容的提问来源于stack exchange，提问作者Shubham Kumar Gupta