如何带格式打印HTML页面指定表格？样式丢失问题求助

方法一：在新窗口中引入原页面样式 #

你的代码仅复制了表格的HTML结构，没有将原页面的样式（比如.table类的样式）同步到新窗口，导致样式丢失。可以通过以下方式把原页面的样式导入新窗口：

var prtContent = document.getElementById("printTable");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');

// 写入完整HTML结构，包含头部和样式
WinPrint.document.write('<html><head>');
// 复制原页面所有style标签
var styles = document.querySelectorAll('style');
styles.forEach(style => {
  WinPrint.document.write(style.outerHTML);
});
// 复制原页面所有CSS链接标签
var links = document.querySelectorAll('link[rel="stylesheet"]');
links.forEach(link => {
  WinPrint.document.write(link.outerHTML);
});
WinPrint.document.write('</head><body>');
WinPrint.document.write(prtContent.outerHTML);
WinPrint.document.write('</body></html>');

WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

这样新窗口会继承原页面的所有样式，表格的.table类样式就能正常生效。

方法二：使用CSS媒体查询直接控制打印内容（更简洁） #

无需新开窗口，直接用@media print隐藏页面其他内容，只显示目标表格：

1. 在原页面CSS中添加：

@media print {
  /* 隐藏所有非打印内容 */
  body * {
    visibility: hidden;
  }
  /* 显示目标表格及其内部元素 */
  #printTable, #printTable * {
    visibility: visible;
  }
  /* 将表格定位到页面顶部，避免打印空白 */
  #printTable {
    position: absolute;
    left: 0;
    top: 0;
  }
}

2. 打印按钮的JS只需调用原生打印方法：

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

这种方法更高效，无需处理新窗口的样式同步问题，直接在原页面控制打印时的显示效果。

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