北京网站推广服务,淘宝建设网站的,外贸公司都是在什么网站做推广,如何做商业推广网站vue3将页面导出成PDF文件#xff08;完美解决图片、表格内容分割问题#xff09; 1、安装依赖2、在utils中创建htmlToPDF.js文件3、在vue中引入并使用 1、安装依赖
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdf2、在utils中创建h… vue3将页面导出成PDF文件完美解决图片、表格内容分割问题 1、安装依赖2、在utils中创建htmlToPDF.js文件3、在vue中引入并使用 1、安装依赖
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdf2、在utils中创建htmlToPDF.js文件
// 页面导出为pdf格式 //title表示为下载的标题html表示document.querySelector(#myPrintHtml)
import html2Canvas from html2canvas
import JsPDF from jspdf
var noTableHeight 0 //table外的元素高度export const htmlPdf (title, html, fileList, type) {// type传有效值pdf则为横版if (fileList) {const pageHeight Math.floor(277 * html.scrollWidth / 190) 20 //计算pdf高度for (let i 0; i fileList.length; i) { //循环获取的元素const multiple Math.ceil((fileList[i].offsetTop fileList[i].offsetHeight) / pageHeight) //元素的高度if (isSplit(fileList, i, multiple * pageHeight)) { //计算是否超出一页var _H //向pdf插入空白块的内容高度if (fileList[i].localName ! tr) { //判断是不是表格里的内容_H multiple * pageHeight - (fileList[i].offsetTop fileList[i].offsetHeight)} else {_H multiple * pageHeight - (fileList[i].offsetTop fileList[i].offsetHeight noTableHeight) 20}var newNode getFooterElement(_H) //向pdf插入空白块的内容const divParent fileList[i].parentNode // 获取该div的父节点const next fileList[i].nextSibling // 获取div的下一个兄弟节点// 判断兄弟节点是否存在if (next) {// 存在则将新节点插入到div的下一个兄弟节点之前即div之后divParent.insertBefore(newNode, next)} else {// 否则向节点添加最后一个子节点divParent.appendChild(newNode)}}}}html2Canvas(html, {allowTaint: false,taintTest: false,logging: false,useCORS: true,dpi: window.devicePixelRatio * 1,scale: 1 // 按比例增加分辨率}).then(canvas {var pdf new JsPDF(p, mm, a4) // A4纸纵向var ctx canvas.getContext(2d)var a4w type ? 277 : 190; var a4h type ? 190 : 277 // A4大小210mm x 297mm四边各保留10mm的边距显示区域190x277var imgHeight Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度var renderedHeight 0while (renderedHeight canvas.height) {var page document.createElement(canvas)page.width canvas.widthpage.height Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页// 用getImageData剪裁指定区域并画到前面创建的canvas对象中page.getContext(2d).putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)pdf.addImage(page.toDataURL(image/jpeg, 1.0), JPEG, 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面保留10mm边距renderedHeight imgHeightif (renderedHeight canvas.height) {pdf.addPage()// 如果后面还有内容添加一个空页}// delete page;}// 保存文件pdf.save(title .pdf)})
}
// pdf截断需要一个空白位置来补充
const getFooterElement (remainingHeight, fillingHeight 0) {const newNode document.createElement(div)newNode.style.background #ffffffnewNode.style.width calc(100% 8px)newNode.style.marginLeft -4pxnewNode.style.marginBottom 0pxnewNode.classList.add(divRemove)newNode.style.height (remainingHeight fillingHeight) pxreturn newNode
}
const isSplit (nodes, index, pageHeight) {// 判断是不是tr 如果不是高度存起来// 表格里的内容要特殊处理// tr.offsetTop 是tr到table表格的高度// 所以计算高速时候要把表格外的高度加起来// 生成的pdf没有表格了这里可以不做处理 直接计算就行if (nodes[index].localName ! tr) { //判断元素是不是trnoTableHeight nodes[index].clientHeight}if (nodes[index].localName ! tr) {return nodes[index].offsetTop nodes[index].offsetHeight pageHeight nodes[index 1] nodes[index 1].offsetTop nodes[index 1].offsetHeight pageHeight} else {return nodes[index].offsetTop nodes[index].offsetHeight noTableHeight pageHeight nodes[index 1] nodes[index 1].offsetTop nodes[index 1].offsetHeight noTableHeight pageHeight}
}3、在vue中引入并使用
templatedivbutton classprimary-btn clickhandleExport导出/buttondiv classcheck-wrapper idpdfRefdiv classpage1-box pdfRef11/divdiv classpage2-box pdfRef11/divdiv classpage3-box pdfRef11/divdiv classpage4-box pdfRef11/divdiv classpage5-box pdfRef11/divdiv classpage6-box pdfRef11/divdiv classpage7-box pdfRef11/divdiv classpage8-box pdfRef11/div/div/div
/template
script setup// 引入方法import { htmlPdf } from /utils/htmlToPDF.js // 导出成PDFconst handleExport (name) {var fileName 投资评审报告const fileList document.getElementsByClassName(pdfRef) // 很重要htmlPdf(fileName, document.querySelector(#pdfRef), fileList)}
/script
