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盒子中，若是下一個盒子的內容仍然溢出，繼續執行上述操做遞歸分頁。

最後統計多少個盒子，就有多少頁試題。

最終實現效果以下圖所示：

版權聲明

本文保留全部權利，版權歸河北工業大學夢雲智軟件開發團隊全部。未經團隊及做者事先書面贊成，您不得以任何方式將本文內容進行商業性使用或經過信息網絡傳播本文內容。本文做者：張喜碩。