前言
生成PDF有很多種方案，現在只討論用jspdf加html2canvas生成多頁PDF時，相信用過的人也遇到如果文字或圖片卡在分頁位置處被無情裁斷的問題。再次之前先簡單介紹下我們用於解決問題的屬性。
Columns 屬性介紹
-
columns:100px 3; //每列多少寬度 分多少列
也就是：
column-count:3 // 分多少列
column-width: 100px //每列多少寬度
-
column-fill: auto; //列排序充列
//默認是balance 就是代表儘量平均的內容； auto會設置成填滿 往後鋪
- column-gap:40px; //設置列之間的間隔
-
column-rule:4px outset #ff6430; //列與列之間的分隔線 寬度 線類型 顏色
也就是：
column-rule-width //列與列之間的分隔線 寬度
column-rule-style //列與列之間的分隔線 類型
column-rule-color //列與列之間的分隔線 顏色
column-count:3; //分成多少列
column-fill: auto; //列排序充列 默認是balance 就是代表儘量平均的內容； auto會設置成填滿 往後鋪
column-gap:40px; //列與列之間的距離
column-rule:4px outset #ff6430; // 列與列之間的分隔線
在線寫html 可以過去試試：https://www.runoob.com/try/tr...
瀏覽器的兼容
兼容截止我編寫時間2019.09.07
實際應用：
好，現在重新回到我們的問題。
這個問題是很正常的，事關我們是用畫布截圖然後放進去PDF裏面，而畫布只會根據高度夠了就截一張，它是不會去監控那個問題是不是剛好卡在字體或圖片的中間呢~ 例如：
我前陣子也遇到相同的問題，我這邊的解決方法是，捨棄截圖從上往下截的截圖：
方案： 改用在排版時就已經分頁排版好，除了封面外，其它時間頁頭頁腳浮動是頁面上方，截圖是一頁一頁的截，這樣好處是前端能清晰掌握整個過程和排版甚至是分頁的計算。【採用】
那麼如果能解決按每頁的排呢？？？
-
條件發射解決方法：循環頁面元素，計算該元素是否剛好卡在一頁的高度位置，如果是， 那麼我們把它後面的就不顯示了，或者插入個分頁結束符等；
很明顯這個是行不通的。
一方面是：因爲整個document下來 元素很多 大量循環所有的元素來監控也很不科學；
另一方面：現在這種基於dom結構渲染完了 ，生插一個標籤的結束符。例如</div>這種，也是算不清有多少個種類不同的結束符； 所以這很明顯是個錯誤示範 我們停止對於這邊的思考。 -
報紙排版法的靈感： 從上往下排目前沒有樣式支持自動能實現的。然而：有個屬性像報紙排版的那種，分欄顯示，左往右，當第一欄滿了會自動排到第二欄。
例如效果：
我們就是利用這麼一個屬性，等第一次dom結構加載完，開始算:
totalPage = Math.ceil(thisHeight / maxheight);
該頁面按尺寸排改要排多少頁= 每頁的實際需要的高度除以頁的最大高度 往上取整；
接下來就根據這個值 設置頁寬度 和欄目個數； 最後每截一張圖就平移對應的那一欄再可 視區裏面就可以了
資料來源：
文檔：https://developer.mozilla.org...
runoob文檔：https://www.runoob.com/cssref...
mark一下 僅供參考 歡迎更正補充 end