如何用@azure/storage-blob从Azure Blob存储下载PDF并保存到本地

你可以通过将Blob下载得到的可读流转换为Blob对象，再借助浏览器的下载API实现本地保存，修改后的代码如下：

public downloadAzureInvoice(): void {
  const orderId = this._order$.value.id;
  this.httpClient
    .get(this.apiUrlsProvider.apiUrl('orders/' + orderId + '/invoice_pdf_url'))
    .pipe(
      switchMap((data: any) => {
        const blobClient = new BlockBlobClient(data.invoice_pdf_url);
        return from(blobClient.download());
      })
    )
    .subscribe({
      next: async (downloadResult) => {
        // 将Blob可读流转换为PDF格式的Blob对象
        const pdfBlob = await new Response(downloadResult.readableStreamBody).blob();
        // 生成Blob临时访问URL
        const downloadUrl = window.URL.createObjectURL(pdfBlob);
        // 创建用于触发下载的a标签
        const downloadLink = document.createElement('a');
        downloadLink.href = downloadUrl;
        // 设置下载的文件名，可根据业务需求调整
        downloadLink.download = `invoice_${orderId}.pdf`;
        // 触发下载操作
        document.body.appendChild(downloadLink);
        downloadLink.click();
        // 清理临时资源
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(downloadLink);
      },
      error: (error) => {
        console.error('PDF下载失败:', error);
        // 这里可添加自定义错误提示逻辑
      }
    });
}

关键步骤说明 #

• 流转Blob对象：downloadResult.readableStreamBody是Azure返回的可读流，通过Response的blob()方法异步转换为PDF格式的Blob。
• 创建下载触发标签：利用window.URL.createObjectURL生成Blob的临时访问地址，绑定到动态创建的a标签上。
• 触发并清理：设置download属性指定文件名，模拟点击a标签触发浏览器下载，最后释放临时URL并移除DOM中的a标签，避免内存泄漏。

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