无需iframe打印PDF：Chrome特定设置下跨域错误的替代方案咨询

这个问题的核心原因是当Chrome启用「下载PDF文件而非自动在Chrome中打开」选项后，浏览器对PDF内容的处理逻辑发生了变化：iframe加载PDF blob时，浏览器不会渲染PDF预览页面，而是直接触发下载流程，此时iframe的contentWindow指向的是浏览器内部的下载相关页面（属于跨域上下文），所以即使是同源生成的blob也会触发SecurityError。

下面提供两种可靠的替代方案：

方案一：使用PDF.js渲染并打印（推荐） #

PDF.js是Mozilla开发的开源库，可以直接在页面中渲染PDF内容，完全不依赖浏览器的PDF预览设置，兼容性更好。

步骤： #

1. 先引入PDF.js库（建议下载到本地使用，避免依赖外部资源）：

<script src="pdf.min.js"></script>
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";</script>

2. 添加页面结构：

<div id="pdf-render-container"></div>
<button onclick="triggerPdfPrint()">打印PDF</button>

3. 实现打印逻辑：

async function triggerPdfPrint() {
  try {
    // 1. 获取PDF文件并转为ArrayBuffer
    const response = await fetch("https://media.readthedocs.org/pdf/flask-cors/latest/flask-cors.pdf");
    const arrayBuffer = await response.arrayBuffer();

    // 2. 加载PDF文档
    const pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
    const renderContainer = document.getElementById("pdf-render-container");
    renderContainer.innerHTML = ""; // 清空容器

    // 3. 逐页渲染PDF到Canvas
    for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
      const page = await pdfDoc.getPage(pageNum);
      // 设置渲染缩放比例，可根据需求调整
      const viewport = page.getViewport({ scale: 1.2 });

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      // 渲染页面到Canvas
      await page.render({
        canvasContext: ctx,
        viewport: viewport
      }).promise;

      renderContainer.appendChild(canvas);
    }

    // 4. 触发浏览器打印
    window.print();

    // 打印完成后清空渲染容器（可选）
    setTimeout(() => {
      renderContainer.innerHTML = "";
    }, 500);
  } catch (err) {
    console.error("打印PDF出错:", err);
  }
}

这个方案的优势是完全脱离浏览器的PDF设置限制，无论用户是否开启下载PDF选项，都能正常渲染并打印。

方案二：使用新窗口加载并打印（局限性：仍可能受浏览器设置影响） #

如果不想引入额外库，可以尝试用新窗口加载blob，然后触发打印，但这个方法在用户开启PDF下载选项时可能失效（新窗口会直接触发下载而非预览）：

fetch("https://media.readthedocs.org/pdf/flask-cors/latest/flask-cors.pdf")
  .then(response => response.blob())
  .then(blobData => {
    const pdfUrl = window.URL.createObjectURL(blobData);
    const printWindow = window.open(pdfUrl, "_blank");

    // 监听新窗口加载完成后触发打印
    printWindow.onload = () => {
      printWindow.print();
      // 打印后延迟关闭窗口，避免打印被中断
      setTimeout(() => printWindow.close(), 1000);
    };
  })
  .catch(err => console.error("处理PDF出错:", err));

如果用户的浏览器设置是允许预览PDF，这个方法可以正常工作，但如果开启了强制下载，就会失效，所以更推荐方案一。

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