代碼在最后，?現(xiàn)在說下原理，jspdf分頁有個比較不好的地方就內(nèi)容過長的時候雖然會雖然能做到分頁，但是會把內(nèi)容給截斷，解決思路是給每個可能會被截斷元素加上類，然后動態(tài)的計算該元素的位置是否在下一頁和上一頁之間，如果在的話就添加一個空白元素把這個元素給擠下去，這樣就能實(shí)現(xiàn)了，看看對比效果把。

這是沒有判斷元素位置之前的，可以看到出現(xiàn)了截斷

再看看判斷了元素位置之后的，在分頁的地方都不會出現(xiàn)斷裂了，完全解決的問題

?上完整代碼

import jsPDF from "jspdf"; import html2canvas from "html2canvas";/* * 使用說明 * ele:需要導(dǎo)出pdf的容器元素(dom節(jié)點(diǎn) 不是id) * pdfFileName: 導(dǎo)出文件的名字 通過調(diào)用outPutPdfFn方法也可傳參數(shù)改變 * splitClassName: 避免分段截斷的類名 當(dāng)pdf有多頁時需要傳入此參數(shù) , 避免pdf分頁時截斷元素 如表格<tr class="itemClass"></tr> * 調(diào)用方式 先 let pdf = new PdfLoader(ele, 'pdf' ,'itemClass'); * 若想改變pdf名稱 pdf.outPutPdfFn(fileName); outPutPdfFn方法返回一個promise 可以使用then方法處理pdf生成后的邏輯 * */ class PdfLoader {constructor(ele, pdfFileName, splitClassName) {this.ele = ele;this.pdfFileName = pdfFileName;this.splitClassName = splitClassName;this.A4_WIDTH = 595;this.A4_HEIGHT = 842;};async getPDF(resolve) {let ele = this.ele;let pdfFileName = this.pdfFileNamelet eleW = ele.offsetWidth// 獲得該容器的寬let eleH = ele.scrollHeight// 獲得該容器的高let eleOffsetTop = ele.offsetTop// 獲得該容器到文檔頂部的距離let eleOffsetLeft = ele.offsetLeft// 獲得該容器到文檔最左的距離let canvas = document.createElement("canvas")let abs = 0let win_in = document.documentElement.clientWidth || document.body.clientWidth// 獲得當(dāng)前可視窗口的寬度（不包含滾動條）let win_out = window.innerWidth// 獲得當(dāng)前窗口的寬度（包含滾動條）if (win_out > win_in) {abs = (win_out - win_in) / 2// 獲得滾動條寬度的一半}canvas.width = eleW * 2// 將畫布寬&&高放大兩倍canvas.height = eleH * 2let context = canvas.getContext("2d")context.scale(2, 2) // 增強(qiáng)圖片清晰度context.translate(-eleOffsetLeft - abs, -eleOffsetTop)html2canvas(ele, {useCORS: true//允許canvas畫布內(nèi)可以跨域請求外部鏈接圖片, 允許跨域請求。}).then(async canvas => {let contentWidth = canvas.widthlet contentHeight = canvas.height//一頁pdf顯示html頁面生成的canvas高度;let pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT // 這樣寫的目的在于保持寬高比例一致 pageHeight/canvas.width = a4紙高度/a4紙寬度// 寬度和canvas.width保持一致//未生成pdf的html頁面高度let leftHeight = contentHeight//頁面偏移let position = 0//a4紙的尺寸[595,842],單位像素，html頁面生成的canvas在pdf中圖片的寬高let imgWidth = this.A4_WIDTH - 10 //-10為了頁面有右邊距l(xiāng)et imgHeight = (this.A4_WIDTH / contentWidth) * contentHeightlet pageData = canvas.toDataURL("image/jpeg", 1.0)let pdf = jsPDF("", "pt", "a4");//有兩個高度需要區(qū)分，一個是html頁面的實(shí)際高度，和生成pdf的頁面高度(841.89)//當(dāng)內(nèi)容未超過pdf一頁顯示的范圍，無需分頁if (leftHeight < pageHeight) {//在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設(shè)置在pdf中顯示；pdf.addImage(pageData, "JPEG", 5, 0, imgWidth, imgHeight)// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);} else {// 分頁while (leftHeight > 0) {pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= this.A4_HEIGHT//避免添加空白頁if (leftHeight > 0) {pdf.addPage()}}}pdf.save(pdfFileName + ".pdf", {returnPromise: true}).then(() => {//去除添加的空div 防止頁面混亂let doms = document.querySelectorAll('.emptyDiv')for (let i = 0; i < doms.length; i++) {doms[i].remove();}});this.ele.style.height = '';resolve();})};async outPutPdfFn(pdfFileName) {return new Promise((resolve, reject) => {this.ele.style.height = 'initial';pdfFileName ? this.pdfFileName = pdfFileName : null;let target = this.ele;let pageHeight = target.scrollWidth / this.A4_WIDTH * this.A4_HEIGHT;// 獲取分割dom，此處為class類名為item的domlet domList = document.getElementsByClassName(this.splitClassName);// 進(jìn)行分割操作，當(dāng)dom內(nèi)容已超出a4的高度，則將該dom前插入一個空dom，把他擠下去，分割let pageNum = 1; //pdf頁數(shù)let eleBounding = ele.getBoundingClientRect();for (let i = 0; i < domList.length; i++) {let node = domList[i];let bound = node.getBoundingClientRect();let offset2Ele = bound.top - eleBounding.toplet currentPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight); //當(dāng)前元素應(yīng)該在哪一頁if (pageNum < currentPage) {pageNum++let divParent = domList[i].parentNode; // 獲取該div的父節(jié)點(diǎn)let newNode = document.createElement('div');newNode.className = 'emptyDiv';newNode.style.background = 'white';newNode.style.height = (pageHeight * (pageNum - 1) - offset2Ele + 30) + 'px'; //+30為了在換下一頁時有頂部的邊距newNode.style.width = '100%';let next = domList[i].nextSibling; // 獲取div的下一個兄弟節(jié)點(diǎn)// 判斷兄弟節(jié)點(diǎn)是否存在if (next) {// 存在則將新節(jié)點(diǎn)插入到div的下一個兄弟節(jié)點(diǎn)之前，即div之后divParent.insertBefore(newNode, node);} else {// 不存在則直接添加到最后,appendChild默認(rèn)添加到divParent的最后divParent.appendChild(newNode);}}}// 異步函數(shù)，導(dǎo)出成功后處理交互this.getPDF(resolve, reject);})}; }export default PdfLoader;

總結(jié)

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

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