游戏logo设计网站,微网站开发制作,dz网站制作,杭州高端企业网站建设代码如下#xff0c;直接粘贴复制即可#xff0c;代码中 jspdf 是全局引入#xff0c;你可以自己局部引入 别人使用标签的方式来显示 base64#xff0c;但是当页面过长时#xff0c;base64 大小过大会导致页面解析异常#xff0c;显示白屏 import html2canvas from html2…代码如下直接粘贴复制即可代码中 jspdf 是全局引入你可以自己局部引入 别人使用标签的方式来显示 base64但是当页面过长时base64 大小过大会导致页面解析异常显示白屏 import html2canvas from html2canvas;export function printPdf(dom: HTMLElement | null) {// 1 dom 存在if (!dom) return;// 2 生成 canvashtml2canvas(dom, { useCORS: true, allowTaint: true }).then(function (canvas) {// document.body.appendChild(canvas);// return;// 1 canvas 宽高const contentWidth canvas.width;const contentHeight canvas.height;console.log(contentWidth contentHeight, contentWidth, contentHeight);// 2 一页 pdf 显示 html 页面生成的 canvas 高度const pageHeight (contentWidth / 592.28) * 841.89;// 3 未生成 pdf 的 html 页面高度let leftHeight contentHeight;// 4 pdf 页面偏移let position 0;// 5 a4纸的尺寸 [595.28, 841.89]html 页面生成的 canvas 在 pdf 中图片的宽高const imgWidth 595.28;const imgHeight (592.28 / contentWidth) * contentHeight;const img canvas.toDataURL(image/jpeg, 1.0);const pdf new jspdf.jsPDF(, pt, a4);// 有两个高度需要区分一个是html页面的实际高度和生成 pdf 的页面高度(841.89)// 当内容未超过 pdf 一页显示的范围无需分页if (leftHeight pageHeight) {pdf.addImage(img, JPEG, 0, 0, imgWidth, imgHeight);} else {while (leftHeight 0) {console.log(imgWidth, imgHeight, position, leftHeight);pdf.addImage(img, JPEG, 0, position, imgWidth, imgHeight);leftHeight - pageHeight;position - 841.89;// 避免添加空白页if (leftHeight 0) {pdf.addPage();}}}// 6 挂载至页面const blob dataURLtoBlob(pdf.output(datauristring));console.log(blob);const url window.URL.createObjectURL(blob); //获得一个pdf的url对象location.href url;// window.open(url, _blank)//打开一个新窗口// console.log(url);// URL.revokeObjectURL(url) //释放内存// const base64String btoa(pdf.output());// const embed embed typeapplication/pdf srcdata:application/pdf;base64, ${base64String} width100% height100%;// document.documentElement.style.overflow hidden;// document.body.innerHTML embed;});
}
