Columns多欄佈局妙用:解決用jspdf加html2canvas生成PDF時文字或圖片被分頁無情截斷問題

前言

生成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裏面，而畫布只會根據高度夠了就截一張，它是不會去監控那個問題是否是恰好卡在字體或圖片的中間呢~ 例如：

我前陣子也遇到相同的問題，我這邊的解決方法是，捨棄截圖從上往下截的截圖：

方案： 改用在排版時就已經分頁排版好，除了封面外，其它時間頁頭頁腳浮動是頁面上方，截圖是一頁一頁的截，這樣好處是前端能清晰掌握整個過程和排版甚至是分頁的計算。【採用】

那麼若是能解決按每頁的排呢？？？

1. 條件發射解決方法：循環頁面元素，計算該元素是否恰好卡在一頁的高度位置，若是是， 那麼咱們把它後面的就不顯示了，或者插入個分頁結束符等；

   很明顯這個是行不通的。
   一方面是：由於整個document下來 元素不少 大量循環全部的元素來監控也很不科學；
   另外一方面：如今這種基於dom結構渲染完了 ，生插一個標籤的結束符。例如</div>這種，也是算不清有多少個種類不一樣的結束符； 因此這很明顯是個錯誤示範 咱們中止對於這邊的思考。

2. 報紙排版法的靈感： 從上往下排目前沒有樣式支持自動能實現的。然而：有個屬性像報紙排版的那種，分欄顯示，左往右，當第一欄滿了會自動排到第二欄。

   例如效果：

咱們就是利用這麼一個屬性，等第一次dom結構加載完，開始算:
totalPage = Math.ceil(thisHeight / maxheight);
該頁面按尺寸排改要排多少頁= 每頁的實際須要的高度除以頁的最大高度 往上取整；

接下來就根據這個值 設置頁寬度 和欄目個數； 最後每截一張圖就平移對應的那一欄再可 視區裏面就能夠了

資料來源：
文檔：https://developer.mozilla.org...
runoob文檔：https://www.runoob.com/cssref...

github demo地址:

https://github.com/yujieying/jspdf_html2canvas_demo

mark一下 僅供參考 歡迎更正補充 end