k-htmlpdf 是能將Dom一鍵配置輸出pdf的包，

• 這個(gè)包是借鑒了qq_251025116大佬的解決方案并優(yōu)化升級(jí)完成的，原文鏈接

jspdf分頁有個(gè)比較不好的地方就內(nèi)容過長的時(shí)候雖然會(huì)雖然能做到分頁，但是會(huì)把內(nèi)容給截?cái)?#xff0c;解決思路是給每個(gè)可能會(huì)被截?cái)嘣丶由项?#xff0c;然后動(dòng)態(tài)的計(jì)算該元素的位置是否在下一頁和上一頁之間，如果在的話就添加一個(gè)空白元素把這個(gè)元素給擠下去，這樣就能實(shí)現(xiàn)了

1.安裝依賴

npm install k-htmlpdf

2.使用方法

import PdfLoader from 'k-htmlpdf'let dom = document.querySelector("#pdfDom");let pdf = new PdfLoader(dom, "測試", "itemClass",'break_page');pdf.outPutPdfFn("測試");

• 使用說明

let pdf = new PdfLoader(<ele>,<pdfFileName>,[splitClassName],[breakClassName])

• ele:需要導(dǎo)出pdf的容器元素(dom節(jié)點(diǎn) 不是id)
• pdfFileName: 導(dǎo)出文件的名字 通過調(diào)用outPutPdfFn方法也可傳參數(shù)改變
• splitClassName: 避免分段截?cái)嗟念惷?當(dāng)pdf有多頁時(shí)需要傳入此參數(shù) , 避免pdf分頁時(shí)截?cái)嘣?如表格
• 調(diào)用方式 先 let pdf = new PdfLoader(ele, ‘pdf’ ,‘itemClass’);
• 若想改變pdf名稱 pdf.outPutPdfFn(fileName); outPutPdfFn方法返回一個(gè)promise 可以使用then方法處理pdf生成后的邏輯
• breakClassName:自定義分頁符類名，默認(rèn)為break_page,添加改類名的標(biāo)簽被自動(dòng)分頁到下一頁

pdf.outPutPdfFn([fileName])

*輸出下載pdf

• 效果演示

正常效果

分頁符

自動(dòng)換頁，防止切割

• gitee 倉庫
  https://gitee.com/kirk958617/k-htmlpdf
• github 倉庫
  https://github.com/manongguai/k-htmlpdf

總結(jié)

以上是生活随笔為你收集整理的html转pdf分页问题终极解决方案 k-htmlpdf的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。