如何利用Blob对象查看PDF文档并实现按需下载？

要实现通过Blob对象查看并下载PDF，核心是将后端返回的二进制PDF数据转换为Blob对象，再借助浏览器的URL API生成可访问的临时链接，同时实现预览和下载功能。具体实现代码如下（基于Angular框架）：

pdfPrint() {
  this.commonservice.PostDownload('serviceName', '', requestBody).subscribe((data: Blob) => {
    // 将后端返回的二进制数据构造成PDF类型的Blob对象
    const pdf = new Blob([data], { type: 'application/pdf' });
    // 生成Blob对象的临时访问URL
    const url1 = window.URL.createObjectURL(pdf);
    
    // 在新窗口打开PDF实现预览
    window.open(url1);
    
    // 创建隐藏的a标签触发下载
    const link = document.createElement('a');
    link.setAttribute('style', 'display: none');
    link.href = url1;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    
    // 清理资源，释放临时URL占用的内存
    window.URL.revokeObjectURL(url1);
    link.remove();
  });
}

关键步骤说明： #

• 获取二进制数据：通过后端接口（示例中为PostDownload）获取PDF的二进制Blob数据
• 构造Blob对象：明确指定MIME类型为application/pdf，确保浏览器能正确识别文件类型
• 生成临时URL：createObjectURL将Blob转换为浏览器可直接访问的URL
• 预览与下载：window.open实现预览，动态创建a标签并触发点击实现下载
• 资源清理：使用revokeObjectURL释放临时URL的内存，避免内存泄漏

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