动态生成N列M行HTML表格 如何优化打印效果适配各类纸张占满单页

以下调整可直接实现A1/A2/A3/A4任意规格纸张下，表格自动占满单页可用空间、字体尽可能最大化的打印效果： #

一、CSS打印规则调整 #

把原有冲突的打印样式替换为以下代码，放在打印媒体查询中避免影响屏幕端显示：

@media print {
  /* 全局重置默认边距，避免浏览器默认样式干扰 */
  * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* 页面规则：自动适配所选纸张尺寸、横向排版、禁用默认页眉页脚 */
  @page {
    size: landscape auto;
    margin: 0;
  }
  html, body {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden;
  }
  /* 表格强制适配页面尺寸 */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
    height: 100% !important;
    table-layout: fixed !important;
  }
  /* 单元格规则，保留最小内边距保证可读性 */
  th, td {
    border: 1px solid #000 !important;
    padding: 2px 4px !important;
    text-align: center;
    overflow: hidden;
  }
  /* 垂直表头适配调整 */
  .vert.dayName {
    writing-mode: vertical-lr;
    height: 100% !important;
    padding: 2px 0 !important;
  }
}

二、动态字体适配逻辑 #

因表格是动态生成的N列M行，可通过JS在打印前自动计算最优字体大小，保证字体尽可能最大且内容不溢出：

function calcOptimalFontSize() {
  const targetTable = document.querySelector('table');
  const pageAvailableWidth = window.innerWidth;
  const pageAvailableHeight = window.innerHeight;
  // 初始最大字体可根据实际需求调整
  let testFontSize = 20;
  // 最小字体阈值设为8px，保证视力不佳的人群可阅读
  while (testFontSize > 8) {
    targetTable.style.fontSize = `${testFontSize}px`;
    // 表格宽高都不超出页面时即为最优尺寸
    if (targetTable.scrollWidth <= pageAvailableWidth && targetTable.scrollHeight <= pageAvailableHeight) {
      break;
    }
    testFontSize -= 0.5;
  }
}
// 监听打印事件自动触发适配
window.addEventListener('beforeprint', calcOptimalFontSize);
// 兼容Edge/Chrome手动打印触发逻辑
window.matchMedia('print').addListener(media => {
  if (media.matches) calcOptimalFontSize();
});

三、跨浏览器兼容说明 #

Chrome、Firefox、Edge三种主流浏览器默认打印时，只需勾选「适应页面宽度」「隐藏页眉页脚」选项，即可和上述规则匹配，不会出现内容溢出多页、或空白区域过多的问题。

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