window.print()移动端打印整个页面而非指定div的解决方法

当前代码通过替换body内容实现打印指定区域，但在移动端浏览器中存在兼容性问题，导致触发打印时仍会渲染整个页面。以下是两种可靠的修复方案：

方案一：使用CSS媒体查询（推荐） #

通过打印专属的CSS样式控制显示/隐藏内容，无需修改DOM结构，兼容性更强：

1. 给页面中不需要打印的元素添加non-printable类（已在按钮上使用）
2. 添加打印样式：

@media print {
  body * {
    visibility: hidden; /* 隐藏所有元素 */
  }
  #printableInvoice, #printableInvoice * {
    visibility: visible; /* 仅显示目标打印区域及内部元素 */
  }
  #printableInvoice {
    position: absolute;
    left: 0;
    top: 0;
  }
  .non-printable {
    display: none !important; /* 强制隐藏非打印元素 */
  }
}

3. 修改打印按钮的JS逻辑，直接调用打印：

<input type="button" 
       class="btn btn-primary non-printable"
       onclick="window.print()"
       value="Proceed, If thermal printer is ready."/>

方案二：优化JS逻辑（通过iframe打印） #

创建独立的iframe承载打印内容，避免修改原页面DOM，解决移动端渲染延迟问题：

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  // 创建隐藏的iframe
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  
  var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 写入打印内容，可引入原页面的CSS保证样式一致
  iframeDoc.write('<html><head><title>Invoice</title>');
  // 引入原页面的样式表，替换成你的样式表路径
  iframeDoc.write('<link rel="stylesheet" href="/path/to/your/styles.css">');
  iframeDoc.write('</head><body>');
  iframeDoc.write(printContents);
  iframeDoc.write('</body></html>');
  iframeDoc.close();
  
  // 等待iframe加载完成后触发打印
  iframe.onload = function() {
    iframe.contentWindow.print();
    // 打印完成后移除iframe
    document.body.removeChild(iframe);
  };
}

原代码问题分析 #

1. 移动端浏览器对document.body.innerHTML的修改可能存在渲染延迟，window.print()执行时页面还未完成更新
2. location.reload()会强制刷新页面，可能打断打印流程
3. 替换body内容会破坏页面原有的事件绑定和DOM结构

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