用CSS控制打印

本节内容可参考示例文件"CaseStudy\WebViewer\打印网页.Table"。

CSS3 提供了丰富的打印控制属性，配合媒体查询"@media print"，无需修改HTML结构或编写JavaScript代码，即可实现精细化的报表打印效果。

本示例提供了完整测试案例，涵盖强制分页、固定页眉页脚、表格优化、页码生成等常用场景。

对于仅针对打印而设置的样式，可以写在@media print { ... } 内，这些样式仅在打印或打印预览时生效，不影响屏幕显示。

以下是一些常用的和打印相关的样式设置：

@media print {
  /* 分页控制 */
  .break-before-page {
    break-before: page;
  }
  .break-after-page {
    break-after: page;
  }
  .avoid-break-inside {
    break-inside: avoid-page;
  }

  /* 页眉/页脚（页码+总页数） */
  @page {
    @top-center {
      content: "公司内部报告";
    }
    @bottom-center {
      content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
    }
  }
}

本节旨在提醒大家可通过CSS3进行精确的打印设置，如果需要详细了解CSS3和打印相关属性的具体介绍，可通过AI查询学习。