在Angular 4动态HTML中嵌入PDF的实现问题求助

针对你遇到的无法用<embed>/<iframe>/<object>加载Blob形式PDF、又不能将文件存到本地系统的情况，我整理了几个可行的思路：

一、先排查常规Blob加载失效的原因 #

有时候不是标签本身不行，而是使用方式有问题，你可以先检查这几点：

• 确保Blob的MIME类型正确设置为application/pdf，这是浏览器识别PDF的关键
• 确认从数据库读取的PDF数据没有损坏（比如可以临时把Blob导出到本地验证是否能正常打开）
• 避免在HTTP环境下使用Blob URL（部分浏览器会有安全限制）
• 使用后记得释放URL.createObjectURL生成的链接，避免内存泄漏

正确的<embed>使用示例：

// 假设pdfData是从数据库获取的ArrayBuffer/Uint8Array
const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });
const embed = document.createElement('embed');
embed.src = URL.createObjectURL(pdfBlob);
embed.type = 'application/pdf';
embed.style.width = '100%';
embed.style.height = '600px';
document.body.appendChild(embed);

// 页面卸载或移除embed时释放URL
window.addEventListener('unload', () => {
  URL.revokeObjectURL(embed.src);
});

二、将PDF转为图片展示（无需ObjectURL的方案） #

如果常规标签确实无法生效，把PDF逐页转成Canvas（图片形式）是完全可行的，这里可以用PDF.js（你需要把库文件下载到本地项目中，不要用外链）来实现：

实现步骤： #

1. 本地引入PDF.js的核心脚本和worker脚本
2. 加载Blob形式的PDF，逐页渲染到Canvas
3. 将Canvas添加到页面中

示例代码：

// 初始化PDF.js（确保已本地引入pdf.js和pdf.worker.js）
async function renderPdfToImages(pdfBlob) {
  const pdfDoc = await pdfjsLib.getDocument(URL.createObjectURL(pdfBlob)).promise;
  
  // 遍历每一页渲染
  for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
    const page = await pdfDoc.getPage(pageNum);
    // 设置渲染缩放比例，可根据需求调整
    const viewport = page.getViewport({ scale: 1.2 });
    
    // 创建Canvas元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    
    // 将PDF页面渲染到Canvas
    await page.render({
      canvasContext: ctx,
      viewport: viewport
    }).promise;
    
    // 添加分页标题和Canvas到页面
    const pageTitle = document.createElement('h4');
    pageTitle.textContent = `第 ${pageNum} 页`;
    document.body.appendChild(pageTitle);
    document.body.appendChild(canvas);
  }
  
  // 释放Blob URL
  URL.revokeObjectURL(pdfBlob.url);
}

// 调用函数，传入你的PDF Blob
// renderPdfToImages(yourDatabasePdfBlob);

三、用PDF.js查看器保留PDF交互性 #

如果需要保留PDF的缩放、翻页等交互功能，还可以用PDF.js自带的viewer组件，通过iframe加载本地的viewer.html，并传入Blob URL：

<!-- 假设你的项目中有pdfjs/viewer.html文件 -->
<iframe id="pdfViewer" src="/pdfjs/viewer.html?file=" width="100%" height="600px" frameborder="0"></iframe>

<script>
const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });
const blobUrl = URL.createObjectURL(pdfBlob);
// 将Blob URL编码后传给viewer.html
document.getElementById('pdfViewer').src += encodeURIComponent(blobUrl);

// 页面卸载时释放URL
window.addEventListener('unload', () => {
  URL.revokeObjectURL(blobUrl);
});
</script>

最后排查方向 #

如果以上方案都无效，可能是你的运行环境有特殊安全限制（比如内嵌WebView、浏览器插件禁用等），这时候可以考虑让后端在内存中将PDF转成图片流返回给前端（无需存到文件系统），前端直接展示图片流即可。

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