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

這是沒(méi)有判斷元素位置之前的，可以看到出現(xiàn)了截?cái)?/p>

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

?上完整代碼

import jsPDF from "jspdf"; import html2canvas from "html2canvas";/* * 使用說(shuō)明 * ele:需要導(dǎo)出pdf的容器元素(dom節(jié)點(diǎn) 不是id) * pdfFileName: 導(dǎo)出文件的名字 通過(guò)調(diào)用outPutPdfFn方法也可傳參數(shù)改變 * splitClassName: 避免分段截?cái)嗟念?lèi)名 當(dāng)pdf有多頁(yè)時(shí)需要傳入此參數(shù) , 避免pdf分頁(yè)時(shí)截?cái)嘣? 如表格<tr class="itemClass"></tr> * 調(diào)用方式 先 let pdf = new PdfLoader(ele, 'pdf' ,'itemClass'); * 若想改變pdf名稱(chēng) pdf.outPutPdfFn(fileName); outPutPdfFn方法返回一個(gè)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)前可視窗口的寬度（不包含滾動(dòng)條）let win_out = window.innerWidth// 獲得當(dāng)前窗口的寬度（包含滾動(dòng)條）if (win_out > win_in) {abs = (win_out - win_in) / 2// 獲得滾動(dòng)條寬度的一半}canvas.width = eleW * 2// 將畫(huà)布寬&&高放大兩倍canvas.height = eleH * 2let context = canvas.getContext("2d")context.scale(2, 2) // 增強(qiáng)圖片清晰度context.translate(-eleOffsetLeft - abs, -eleOffsetTop)html2canvas(ele, {useCORS: true//允許canvas畫(huà)布內(nèi)可以跨域請(qǐng)求外部鏈接圖片, 允許跨域請(qǐng)求。}).then(async canvas => {let contentWidth = canvas.widthlet contentHeight = canvas.height//一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;let pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT // 這樣寫(xiě)的目的在于保持寬高比例一致 pageHeight/canvas.width = a4紙高度/a4紙寬度// 寬度和canvas.width保持一致//未生成pdf的html頁(yè)面高度let leftHeight = contentHeight//頁(yè)面偏移let position = 0//a4紙的尺寸[595,842],單位像素，html頁(yè)面生成的canvas在pdf中圖片的寬高let imgWidth = this.A4_WIDTH - 10 //-10為了頁(yè)面有右邊距l(xiāng)et imgHeight = (this.A4_WIDTH / contentWidth) * contentHeightlet pageData = canvas.toDataURL("image/jpeg", 1.0)let pdf = jsPDF("", "pt", "a4");//有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89)//當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)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 {// 分頁(yè)while (leftHeight > 0) {pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= this.A4_HEIGHT//避免添加空白頁(yè)if (leftHeight > 0) {pdf.addPage()}}}pdf.save(pdfFileName + ".pdf", {returnPromise: true}).then(() => {//去除添加的空div 防止頁(yè)面混亂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類(lèi)名為item的domlet domList = document.getElementsByClassName(this.splitClassName);// 進(jìn)行分割操作，當(dāng)dom內(nèi)容已超出a4的高度，則將該dom前插入一個(gè)空dom，把他擠下去，分割let pageNum = 1; //pdf頁(yè)數(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)該在哪一頁(yè)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為了在換下一頁(yè)時(shí)有頂部的邊距newNode.style.width = '100%';let next = domList[i].nextSibling; // 獲取div的下一個(gè)兄弟節(jié)點(diǎn)// 判斷兄弟節(jié)點(diǎn)是否存在if (next) {// 存在則將新節(jié)點(diǎn)插入到div的下一個(gè)兄弟節(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分页问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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