Angular 实现 A4 格式分页渲染

引言

原试卷预览功能如下图所示，按普通的网页格式预览试卷。

最终通过HTML渲染后的PDF如下图所示，存在以下问题：

1. 无法显示试卷页号，目前不知道最终生成几页的PDF。(请教过考研的同学，考研的试卷像书一样，翻页的)。
2. 试卷样式与预览不一致，因二者尺寸不同，最终的生成效果无法达到与网页端预览一致。
3. 试题因PDF分页被强行分割，跨页的试题，可能半行字留在上一页，半行字留在下一页，非常的不专业。

计划新试卷预览功能按A4格式进行渲染，以达到预览与最终生成文档效果的一致性。

实现

科普

国际标准化组织定义了纸张的尺寸标准，A4纸是常用的纸张格式，尺寸为21cm × 29.7cm。

参考

本文参考问题：A4 page like layout in html - StackOverflow

CSS

定义一个page的class选择器样式，宽高设置为A4纸的尺寸，设置边框，即实现一个标准的A4纸盒子。

.page {
  margin: auto;
  padding: 2cm;
  width: 21cm;
  height: 29.7cm;
  border: 1px #D3D3D3 solid;
  background: white;
}

尺寸单位

这里也是我第一次知道CSS的尺寸可以直接设置cm等单位，过去常用的只有px、vw等，去火狐开发者文档查询了相关单位，发现原来有这么多尺寸单位可以使用，简单整理了一下个人认为比较有用的。

相关文档：CSS的值与单位 - MDN web docs

绝对长度单位

有cm、px等。最常用的还是px像素，偶尔使用cm、mm等单位。

相对长度单位

rem：相对于根元素的字体大小。

vw：浏览器窗口宽度的1%。

vh：浏览器窗口高度的1%。

如何实现分页

分页的相关代码比较复杂，涉及到浏览器关于高度定义的相关概念，这里只讲解思路。

将所有元素放到当前的A4盒子中，判断盒子中的内容总高度是否大于盒子的内容高度(去除padding)。

如果大于，说明内容溢出了当前页，从后向前依次移除A4盒子中的内容，直到当前页没有溢出。

将所有在当前页被移除的内容动态地添加到紧邻的下一个A4盒子中，如果下一个盒子的内容仍然溢出，继续执行上述操作递归分页。

最后统计多少个盒子，就有多少页试题。

最终实现效果如下图所示：

版权声明

本文保留所有权利，版权归河北工业大学梦云智软件开发团队所有。未经团队及作者事先书面同意，您不得以任何方式将本文内容进行商业性使用或通过信息网络传播本文内容。本文作者：张喜硕。