无需iframe技巧打印PDF：Chrome跨域报错解决方案求助

我太懂你遇到的这个糟心问题了——当Chrome开启了「下载PDF文件而非自动在Chrome中打开」选项时，原本正常的iframe打印逻辑直接触发跨域安全错误，哪怕文件是同域的也没用。这背后的原因其实是：浏览器启用这个设置后，iframe加载PDF blob URL时，并不会像往常一样渲染内容，而是直接触发下载流程，这时候iframe的contentWindow会处于一个特殊的隔离上下文，和你的页面源不同，自然就触发了SecurityError。

下面给你推荐两种更可靠的打印方案，完全不受Chrome的PDF设置影响：

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

PDF.js是Mozilla开发的开源库，它能直接在浏览器中用Canvas渲染PDF内容，不需要依赖浏览器内置的PDF查看器，所以完全避开了Chrome的下载设置限制。

实现步骤： #

1. 先引入PDF.js的核心库和worker脚本（你可以从官方项目获取文件并本地部署，避免外链依赖）
2. 用fetch获取PDF的ArrayBuffer，然后通过PDF.js渲染所有页面到Canvas，最后触发打印

代码示例： #

<!-- 隐藏的容器用来放渲染后的PDF页面 -->
<div id="pdf-container" style="display: none;"></div>

<script>
// 初始化PDF.js（假设你已经引入了pdf.js和pdf.worker.js）
pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js';

fetch("https://media.readthedocs.org/pdf/flask-cors/latest/flask-cors.pdf")
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    // 加载PDF文档
    return pdfjsLib.getDocument({ data: arrayBuffer }).promise;
  })
  .then(pdf => {
    const container = document.getElementById("pdf-container");
    const renderTasks = [];

    // 逐个渲染PDF页面
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      renderTasks.push(
        pdf.getPage(pageNum).then(page => {
          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;
          container.appendChild(canvas);

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

    // 所有页面渲染完成后触发打印
    Promise.all(renderTasks).then(() => {
      container.style.display = "block";
      window.print();
      
      // 打印完成后清理容器
      setTimeout(() => {
        container.innerHTML = "";
        container.style.display = "none";
      }, 1000);
    });
  })
  .catch(err => {
    console.error("处理PDF时出错：", err);
  });
</script>

这个方案的优势是兼容性强，除了Chrome，在其他浏览器也能稳定运行，而且完全不受PDF相关设置的干扰。

方案二：直接创建打印窗口（简易版，可靠性有限） #

如果你不想引入额外库，可以尝试把PDF blob URL直接在新窗口打开，然后在新窗口触发打印。不过注意：如果Chrome还是设置为下载PDF，这个方法可能会直接触发下载而不是打印，但部分场景下可以正常工作：

fetch("https://media.readthedocs.org/pdf/flask-cors/latest/flask-cors.pdf")
  .then(response => response.blob())
  .then(blob => {
    const pdfUrl = window.URL.createObjectURL(blob);
    const printWindow = window.open(pdfUrl, "_blank");
    
    printWindow.onload = () => {
      printWindow.print();
      // 打印后释放blob URL并关闭窗口
      setTimeout(() => {
        window.URL.revokeObjectURL(pdfUrl);
        printWindow.close();
      }, 1000);
    };
  });

但还是要强调，这个方案的可靠性不如PDF.js，因为它依然依赖浏览器的PDF处理行为。

总结来说，PDF.js是解决这个问题的最佳方案，它从根本上绕过了浏览器内置PDF查看器的限制，确保打印逻辑稳定运行。

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