洛阳青峰做网站,wordpress自适应空白主题,360收录入口,平面设计素材网址该方法导出的pdf大小是A4纸的尺寸#xff0c;如果大于1页需要根据元素高度进行截断的话#xff0c;页面元素需要加 class ergodic-dom#xff0c;方法里面会获取ergodic-dom元素#xff0c;对元素高度和A4高度做比较#xff0c;如果大于A4高度#xff0c;会塞一个空白元素…该方法导出的pdf大小是A4纸的尺寸如果大于1页需要根据元素高度进行截断的话页面元素需要加 class ergodic-dom方法里面会获取ergodic-dom元素对元素高度和A4高度做比较如果大于A4高度会塞一个空白元素确保每一个元素在换页的时候不会被分割。
import exportPDFMixin from /mixins/exportPDFMixin;
mixins: [exportPDFMixin],span v-showshowEdit classexport textR clickexportPDF(pdfDom, 导出的pdf名称)导出/span//exportPDFMixin.js
import html2Canvas from html2canvas;
import JsPDF from jspdf;
export default {data() {return {showEdit: true}},methods: {exportPDF(elId, title pdf) {this.showEdit false;this.$nextTick(() {this.downloadPDF(elId, title);})},downloadPDF(elId, title) {html2Canvas(document.querySelector(#${elId}), {allowTaint: true,useCORS: true,onclone: (documentclone) {this.formatNode(documentclone);}}).then((canvas) {let contentWidth canvas.widthlet contentHeight canvas.heightlet pageHeight contentWidth / 592.28 * 841.89let leftHeight contentHeightlet position 0let imgWidth 595.28let imgHeight 592.28 / contentWidth * contentHeightlet pageData canvas.toDataURL(image/jpeg, 1.0)let PDF new JsPDF(, pt, a4)if (leftHeight pageHeight) {PDF.addImage(pageData, JPEG, 0, 0, imgWidth, imgHeight)} else {while (leftHeight 0) {PDF.addImage(pageData, JPEG, 0, position, imgWidth, imgHeight)leftHeight - pageHeightposition - 841.89if (leftHeight 0) {PDF.addPage()}}}PDF.save(title .pdf);this.showEdit true;})},formatNode(documentclone) {let pageHeight documentclone.querySelector(#pdfDom).scrollWidth / 592.28 * 841.89;let lableListID documentclone.getElementsByClassName(ergodic-dom);for (let i 0; i lableListID.length; i) {let multiple Math.ceil((lableListID[i].offsetTop lableListID[i].offsetHeight) / pageHeight)if (this.isSplit(lableListID, i, multiple * pageHeight)) {let divParent lableListID[i].parentNode // 获取该div的父节点let _H multiple * pageHeight - (lableListID[i].offsetTop lableListID[i].offsetHeight)let newNode this.getFooterElement(_H)let next lableListID[i].nextSibling // 获取div的下一个兄弟节点// 判断兄弟节点是否存在if (next) {// 存在则将新节点插入到div的下一个兄弟节点之前即div之后divParent.insertBefore(newNode, next)} else {// 不存在则直接添加到最后,appendChild默认添加到divParent的最后divParent.appendChild(newNode)}}}},getFooterElement (remainingHeight, fillingHeight 85) {let newNode document.createElement(div)newNode.style.background #fffnewNode.style.width calc(100% 8px)newNode.style.marginLeft -4pxnewNode.style.marginBottom 0pxnewNode.style.height (remainingHeight fillingHeight) px // pdf截断需要一个空白位置return newNode},isSplit (nodes, index, pageHeight) {return nodes[index].offsetTop nodes[index].offsetHeight pageHeight nodes[index 1] nodes[index 1].offsetTop nodes[index 1].offsetHeight pageHeight},}
}
