哪些公司需要网站开发,拟在建项目信息网官网,久久诗歌网,iis7重启 网站这是借鉴了qq_251025116大佬的解决方案并优化升级完成的#xff0c;原文链接
1.安装依赖 npm install jspdf html2canvas2.使用方法 import htmlToPdffrom ./index.jsconst suc () {message.success(success);};//记得在需要打印的div上面添加 idlet dom document.que…这是借鉴了qq_251025116大佬的解决方案并优化升级完成的原文链接
1.安装依赖 npm install jspdf html2canvas2.使用方法 import htmlToPdffrom ./index.jsconst suc () {message.success(success);};//记得在需要打印的div上面添加 idlet dom document.querySelector(#testPdf);let pdf new htmlToPdf(dom, 测试, splitPages, ,, suc, 2);pdf.outPutPdfFn(测试);3.使用说明 //splitPages 是需要添加的类名需要再那个地方分页就在那个地方添加类名 splitPages//如SpeciesIdentification classsplitPages :baseDatabaseData /SpeciesIdentificationSecond classsplitPages :baseDatabaseData /RepetPic classsplitPages :baseDatabaseData /RepetTable classsplitPages :baseDatabaseData /GeneralAnnotation classsplitPages :baseDatabaseData /导出效果 具体代码
import jsPDF from jspdf;
import html2canvas from html2canvas;/*
* 使用说明
* ele:需要导出pdf的容器元素(dom节点 不是id)
* pdfFileName: 导出文件的名字 通过调用outPutPdfFn方法也可传参数改变
* splitClassName: 避免分段截断的类名 当pdf有多页时需要传入此参数 , 避免pdf分页时截断元素 如表格tr classitemClass/tr
* breakClassName:自定义分页符类名默认为break_page,添加改类名的标签被自动分页到下一页
* sucCallback成功回调函数
* scale增强图片清晰度 数字也打越清晰
* 调用方式 先 let pdf new htmlToPdf(ele, pdf ,itemClass);
* 若想改变pdf名称 pdf.outPutPdfFn(fileName); outPutPdfFn方法返回一个promise 可以使用then方法处理pdf生成后的逻辑
* */class htmlToPdf {constructor(ele, pdfFileName, splitClassName itemClass, breakClassName break_page, sucCallback () { }, scale 2) {this.ele ele;this.pdfFileName pdfFileName;this.splitClassName splitClassName;this.breakClassName breakClassName;this.sucCallback sucCallback;this.scale scale;this.A4_WIDTH 595;this.A4_HEIGHT 842;this.pageHeight 0this.pageNum 1};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 // 获得当前可视窗口的宽度不包含滚动条let win_out window.innerWidth // 获得当前窗口的宽度包含滚动条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(this.scale, this.scale) // 增强图片清晰度context.translate(- eleOffsetLeft - abs, - eleOffsetTop)html2canvas(ele, {useCORS: true // 允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。}).then(async canvas {let contentWidth canvas.widthlet contentHeight canvas.height// 一页pdf显示html页面生成的canvas高度;this.pageHeight (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT// 这样写的目的在于保持宽高比例一致 this.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为了页面有右边距let imgHeight (this.A4_WIDTH / contentWidth) * contentHeightlet pageData canvas.toDataURL(image/jpeg, 1.0)let pdf jsPDF(, pt, a4);// 有两个高度需要区分一个是html页面的实际高度和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围无需分页if (leftHeight this.pageHeight) { // 在pdf.addImage(pageData, JPEG, 左上宽度高度)设置在pdf中显示// pdf.addImage(pageData, JPEG, 5, 0, imgWidth, imgHeight)pdf.addImage(pageData, JPEG, 6, 40, imgWidth - 12, imgHeight - 80);} else { // 分页while (leftHeight 0) {pdf.addImage(pageData, JPEG, 6, position 40, imgWidth - 12, imgHeight - 80)leftHeight - this.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 ;this.sucCallback()resolve();})};// 输出pdfasync outPutPdfFn(pdfFileName) {return new Promise((resolve, reject) { // 进行分割操作当dom内容已超出a4的高度则将该dom前插入一个空dom把他挤下去分割let target this.ele;this.pageHeight target.scrollWidth / this.A4_WIDTH * this.A4_HEIGHT;this.ele.style.height initial;pdfFileName ? this.pdfFileName pdfFileName : null;this.pageNum 1; // pdf页数this.domEach(this.ele)// 异步函数导出成功后处理交互this.getPDF(resolve, reject);})};domEach(dom) {let childNodes dom.childNodeschildNodes.forEach((childDom, index) {if (this.hasClass(childDom, this.splitClassName)) {let node childDom;let eleBounding this.ele.getBoundingClientRect();let bound node.getBoundingClientRect();let offset2Ele bound.top - eleBounding.toplet currentPage Math.ceil((bound.bottom - eleBounding.top) / this.pageHeight); // 当前元素应该在哪一页if (this.pageNum currentPage) {this.pageNumlet divParent childDom.parentNode; // 获取该div的父节点let newNode document.createElement(div);newNode.className emptyDiv;newNode.style.background white;newNode.style.height (this.pageHeight * (this.pageNum - 1) - offset2Ele 30) px; // 30为了在换下一页时有顶部的边距newNode.style.width 100%;let next childDom.nextSibling;// 获取div的下一个兄弟节点// 判断兄弟节点是否存在if (next) { // 存在则将新节点插入到div的下一个兄弟节点之前即div之后divParent.insertBefore(newNode, node);} else { // 不存在则直接添加到最后,appendChild默认添加到divParent的最后divParent.appendChild(newNode);}}}if (this.hasClass(childDom, this.breakClassName)) {this.pageNumconsole.log(break_page);let eleBounding this.ele.getBoundingClientRect();let bound childDom.getBoundingClientRect();let offset2Ele bound.top - eleBounding.top// 剩余高度let alreadyHeight offset2Ele % this.pageHeightlet remainingHeight this.pageHeight - alreadyHeight 20childDom.style.height remainingHeight px}if (childDom.childNodes.length) {this.domEach(childDom)}})}hasClass(element, cls) {return ( element.className ).indexOf( cls ) -1;}
}export default htmlToPdf;
