如何实现点击打印按钮时打印窗口显示与页面一致的表格

现有打印逻辑仅将目标区域的HTML结构写入空白弹窗，未同步引入原页面加载的CSS样式资源，也未等待图片等静态资源加载完成就触发打印。新弹窗是独立的空白文档，缺失Bootstrap表格、卡片等依赖的样式规则，自然无法复现原页面的显示效果。

直接替换原有printPageArea函数即可，修改后的代码如下：

function printPageArea(areaID){
   const printContent = document.getElementById(areaID);
   const WinPrint = window.open('', '_blank', 'width=900,height=700');
   // 提取当前页面所有已加载的外部样式、内联样式
   let styleHtml = '';
   document.querySelectorAll('link[rel="stylesheet"], style').forEach(styleNode => {
       styleHtml += styleNode.outerHTML;
   });
   // 写入完整HTML结构，引入所有样式
   WinPrint.document.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>打印</title>
    ${styleHtml}
    <style>
        body { margin: 20px; }
        /* 打印场景下去除不必要的阴影，节省墨粉 */
        .card.shadow { box-shadow: none !important; }
        @page { margin: 1cm; }
    </style>
</head>
<body>
    ${printContent.innerHTML}
</body>
</html>
   `);
   WinPrint.document.close();
   // 等待所有资源（图片、样式）加载完成后再触发打印
   WinPrint.onload = function() {
       WinPrint.focus();
       WinPrint.print();
       WinPrint.close();
   }
}

适配说明 #

• 修改后的函数会自动同步原页面所有样式规则，原页面的条纹表格、卡片边距、字体效果都会完整保留，和页面显示效果完全一致，不需要额外手动编写重复样式。
• 增加了资源加载完成监听，避免logo图片还没加载完就触发打印导致的logo缺失问题。
• 内置打印边距适配，同时移除了打印场景下不需要的卡片阴影，避免内容被裁切。
• 如果出现logo加载失败的情况，将图片路径替换为站点绝对路径即可正常加载。

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