苹果设备window.print()打印指定div失效问题求助

原方法直接替换body.innerHTML的方式在Safari（WebKit内核）中失效，原因是Safari执行window.print()时可能未完成DOM重新渲染，或保留了页面缓存，导致打印整个页面。以下是两种可靠的兼容方案：

方案一：通过新窗口打印（兼容性强） #

创建独立窗口加载打印内容，避免修改原页面DOM，彻底解决Safari的渲染问题：

修改后的脚本 #

function printDiv(divName) {
  const printContent = document.getElementById(divName).innerHTML;
  // 打开空白新窗口
  const printWindow = window.open('', '_blank', 'width=600,height=800');
  
  // 写入HTML结构，记得引入原页面样式保证打印格式一致
  printWindow.document.write(`
    <html>
      <head>
        <title>打印内容</title>
        <link rel="stylesheet" type="text/css" href="你的样式文件路径.css">
      </head>
      <body>${printContent}</body>
    </html>
  `);
  
  printWindow.document.close();
  // 等待窗口加载完成后执行打印
  printWindow.onload = function() {
    printWindow.print();
    printWindow.close();
  };
}

按钮代码保持不变 #

<input class="loginbutton" type="button" onclick="printDiv('printableArea')" value="PRINT" />

方案二：CSS媒体查询控制（更简洁优雅） #

利用打印媒体查询，直接控制打印时的元素显示隐藏，无需修改DOM：

添加CSS样式 #

@media print {
  /* 默认隐藏所有页面元素 */
  body * {
    visibility: hidden;
  }
  /* 仅显示目标打印区域及其子元素 */
  #printableArea, #printableArea * {
    visibility: visible;
  }
  /* 调整打印区域位置，避免留白或错位 */
  #printableArea {
    position: absolute;
    left: 0;
    top: 0;
  }
}

修改打印脚本和按钮 #

function printDiv() {
  window.print();
}

<input class="loginbutton" type="button" onclick="printDiv()" value="PRINT" />

注意事项 #

• 方案二中，若打印区域依赖原页面的样式，需确保样式在@media print中正确生效，部分复杂样式可能需要单独适配打印场景。
• 方案一中，若使用内联样式或动态生成的样式，可直接将样式内容写入新窗口的<style>标签中，无需外部CSS链接。

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