window.print()在安卓移动端Chrome浏览器不生效问题排查咨询

• 弹窗拦截机制限制：安卓端Chrome对window.open()打开的空白临时弹窗有严格的权限校验，未等待窗口加载完成就写入内容、调用接口的操作会被直接判定为恶意弹窗拦截，触发权限错误。
• 执行时序不兼容：原代码在写入表格内容后立刻调用print()、紧接着执行close()关闭窗口，而安卓端Chrome的打印模块和页面主线程是异步运行的，打印对话框还未完成初始化窗口就被关闭，直接导致打印流程中断。桌面端Chrome因为性能更高、时序容错阈值大，不会触发这个问题。
• 接口支持限制：安卓版Chrome从78版本开始就存在已知bug，不支持对非当前激活的主窗口调用print()方法，新开弹窗内调用打印接口会直接抛出无权限错误。

以下方案均不依赖新开弹窗，全端兼容桌面和移动版Chrome：

方案1：页内临时替换内容打印（兼容性最优） #

核心逻辑是打印前临时把页面内容替换为需要打印的表格，打印完成后自动恢复原页面内容，完全规避弹窗相关问题，可直接替换原有JS逻辑：

<table border="1" cellpadding="3" id="printTable">
    <tbody id="printTbody">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>      
            <th>Points</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>      
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>        
            <td>94</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>        
            <td>80</td>
        </tr>
        <tr>
            <td>Adam</td>
            <td>Johnson</td>        
            <td>67</td>
        </tr>
    </tbody>
</table>    
<button onclick="printTablefun()">Print Table</button>

<script>
function printTablefun() {
  // 缓存当前页面原有内容
  const originalPageContent = document.body.innerHTML;
  // 组装待打印的内容
  const printContent = `
    <center><h1>Header</h1></center>
    ${document.getElementById("printTable").outerHTML}
  `;
  // 替换页面内容
  document.body.innerHTML = printContent;
  // 等待DOM渲染完成后触发打印
  setTimeout(() => {
    window.print();
    // 监听打印结束事件，恢复原页面
    window.onafterprint = () => {
      document.body.innerHTML = originalPageContent;
      window.onafterprint = null;
    }
  }, 100);
}
</script>

注意：如果页面绑定了动态事件，恢复内容后需要重新绑定对应事件，原生静态页面无需额外处理。

方案2：CSS打印样式隔离（逻辑最简单） #

不需要修改原有JS逻辑，只需要新增打印媒体查询样式，打印时自动隐藏页面无关元素，只展示表格内容，按钮直接调用window.print()即可：

@media print {
  /* 打印时默认隐藏所有元素 */
  body * {
    visibility: hidden;
  }
  /* 仅显示表格和表格内元素 */
  #printTable, #printTable * {
    visibility: visible;
  }
  /* 定位表格到页面顶部，避免空白 */
  #printTable {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
  }
  /* 打印时显示自定义表头 */
  #printTable::before {
    content: "Header";
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
}

对应的JS逻辑可以简化为：

function printTablefun() {
  window.print()
}

方案3：前端生成PDF触发打印 #

如果不想改动当前页面状态，可以在前端将表格内容渲染生成PDF文件，触发文件下载后，用户可直接用系统自带的PDF查看器调用打印功能，完全不依赖浏览器的print接口，适配所有移动端浏览器。

内容的提问来源于stack exchange，提问作者A. Chithrai