如何通过window.print()实现打印时表格适配页面宽度？

我懂你现在的困扰——用window.print()触发打印时，表格直接超出了打印页面的宽度，预览效果很糟。结合你现有的打印逻辑，我给你几个靠谱的解决方案：

1. 用打印专用CSS媒体查询做全局适配 #

这是最推荐的方式，专门针对打印场景定制样式，不会影响页面平时的显示。你可以在页面的样式表中添加这段代码：

@media print {
  /* 让表格容器占满打印页面的可用宽度 */
  .your-table-wrapper {
    width: 100% !important;
    overflow-x: auto;
  }

  /* 强制表格采用固定布局，自动分配列宽适配页面 */
  table {
    width: 100% !important;
    table-layout: fixed;
  }

  /* 让单元格内容自动换行，避免超长内容撑宽表格 */
  table td, table th {
    word-wrap: break-word;
    white-space: normal !important;
    max-width: 180px; /* 可根据实际内容调整这个值 */
  }

  /* 调整打印页面边距，给表格留出更多空间 */
  @page {
    margin: 0.8cm; /* 默认边距可能偏宽，按需调整 */
  }
}

记得把.your-table-wrapper替换成你实际的表格外层容器的类名或ID，比如你的表格如果是#report-table，就把选择器改成#report-table或者它的父容器。

2. 在打印函数里临时调整表格样式（不改动全局CSS） #

如果你不想修改全局样式，可以在打印前后临时给表格加适配样式，打印完成后再恢复：

$scope.print= function() { 
  $("#tab2-panel-tools").hide(); 
  $("#title-row").hide(); 

  // 临时给表格添加打印适配样式
  const $targetTable = $("#your-table-id"); // 替换成你的表格ID
  // 保存原样式（如果需要精确恢复的话）
  const originalTableStyle = $targetTable.attr("style") || "";
  const originalCellStyle = $targetTable.find("td, th").attr("style") || "";

  $targetTable.css({
    "width": "100%",
    "table-layout": "fixed"
  });
  $targetTable.find("td, th").css({
    "word-wrap": "break-word",
    "white-space": "normal"
  });

  window.print(); 

  // 恢复表格原有样式
  $targetTable.attr("style", originalTableStyle);
  $targetTable.find("td, th").attr("style", originalCellStyle);

  $("#tab2-panel-tools").show(); 
  $("#title-row").show(); 
}

这种方式适合临时调整，不会干扰页面正常状态下的样式。

3. 极端情况：强制横向打印 #

如果表格内容实在太宽，上面的方法都压不住，那可以强制打印时用横向布局，在媒体查询里加：

@media print {
  @page {
    size: landscape; /* 设置为横向打印 */
    margin: 0.8cm;
  }
}

不过这个要结合业务场景考虑，不是所有打印需求都适合横向。

另外，你也可以试试浏览器打印设置里的「缩放」选项，选择「适应页面宽度」，这是个临时的快捷解决办法，但还是建议用CSS做通用适配，保证所有用户的打印效果一致。

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