赞
踩
//第一个:将页面html转换成图片
npm install --save html2canvas
//第二个:将图片生成pdf
npm install jspdf --save
//html里面 <template> //在要导出为PDF的页面中添加ref <div class="app-container" ref="report"> <h1>{{ prize.actName }}</h1> <div style="position: absolute;top: 30px;right:25px;line-height:70px;display: flex;justify-content: right;width: 90%;"> <el-button type="text" @click="exportPDF">导出为pdf</el-button> </div> //页面相关内容 </div> <template> //页面中引入相关模块 import html2Canvas from 'html2canvas'; import JsPDF from 'jspdf'; //methods中的方法 // 导出为pdf exportPDF(){ // report ref let PDFView = this.$refs.report html2Canvas(PDFView,{ useCORS: true, //是否尝试使用CORS从服务器加载图像 allowTaint: true, dpi: 300, //解决生产图片模糊 scale: 3, //清晰度--放大倍数 }).then((canvas)=>{ let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度; let leftHeight = contentHeight //未生成pdf的html页面高度 let position = 0 //pdf页面偏移 //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 // let imgWidth = 595.28 let imgWidth = 560.28 //宽度 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } PDF.save(this.prize.actName+'报告'+ '.pdf')//下载标题 }) }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。