iOS Safari中window.print()无法自动唤起打印弹窗问题求助

问题根源 #

iOS Safari有两个核心限制导致你的代码失效：

• 非用户手动触发的window.print()会被浏览器拦截，异步操作（比如setTimeout）会脱离原用户交互上下文，导致调用无效。
• 通过window.open打开PDF后，新窗口的上下文是Safari内置的PDF查看器，而非普通网页，无法通过脚本调用print()方法。

修复方案 #

统一iOS和非iOS的处理逻辑，在当前页面将PDF渲染为Canvas后直接触发打印，同时改用iframe隔离打印内容（避免修改当前页面DOM），确保print()调用处于用户交互的上下文链中。

修改后的代码：

const printMenu = async () => {
  const { data } = await useFetch(
    "https://*****/", {
    method: "GET",
    query: {
      websiteId: "0r5bGoJkXJ0k4vMjb900",
      contentGroupId: "lwTMIfak4naAVflMtMpk",
      contentItemId: props.contentItemId,
    },
  });

  const pdf_url = (data.value as any).data.image_urls[0];

  try {
    const loadingTask = window.pdfjsLib.getDocument(pdf_url);
    const pdf = await loadingTask.promise;
    const scale = 1.5;
    const numPages = pdf.numPages;
    const allPagesDiv = document.createElement('div');

    // 渲染所有PDF页面为Canvas
    for (let i = 1; i <= numPages; i++) {
      const page = await pdf.getPage(i);
      const viewport = page.getViewport({ scale: scale });
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      if (!context) {
        throw new Error('Unable to get 2d context from canvas');
      }
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      canvas.style.display = 'block';
      canvas.style.pageBreakAfter = 'always'; // 确保每页分页

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
      allPagesDiv.appendChild(canvas);
    }

    // 创建iframe用于打印，避免修改当前页面DOM
    const printIframe = document.createElement('iframe');
    printIframe.style.display = 'none';
    document.body.appendChild(printIframe);
    const printDoc = printIframe.contentDocument || printIframe.contentWindow.document;
    
    // 设置打印样式
    printDoc.write(`
      <html>
        <head>
          <style>
            @media print {
              body { margin: 0; }
              canvas { max-width: 100%; page-break-after: always; }
            }
          </style>
        </head>
        <body></body>
      </html>
    `);
    printDoc.close();
    printDoc.body.appendChild(allPagesDiv);

    // 触发打印，确保处于用户交互上下文
    printIframe.contentWindow.print();

    // 打印完成后移除iframe
    setTimeout(() => {
      document.body.removeChild(printIframe);
    }, 1000);

  } catch (error) {
    console.error("Error printing PDF: ", error);
  }
};

关键优化点 #

• 使用iframe隔离打印内容，避免修改当前页面的DOM和样式，减少副作用。
• 为Canvas添加pageBreakAfter: always样式，确保PDF每页在打印时自动分页。
• 直接在当前页面的iframe中触发打印，保证print()调用处于原用户点击事件的上下文链中，避免被iOS Safari拦截。
• 移除了iOS专属的跨窗口逻辑，统一处理流程，减少兼容性问题。

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