当前位置：首页 > news >正文

Vue：使用html2canvas将数据导出到PDF上（含分页）

news 来源：原创 2024/9/19 3:00:32

【HTML】

 <a-button type="primary" style="margin-right: 5px" @click="exportPdf">导出
</a-button>

【JS】

exportPdf() {const _this = thisthis.loading = truevar offsetW = 600var offsetH = 200 var element = $('.report-item')var w = element.width() + offsetW // 获得该容器的宽，适当加一下偏移量var h = element.height() + offsetH // 获得该容器的高，适当加一下偏移量var canvas = document.createElement('canvas')canvas.getContext('2d')canvas.width = wcanvas.height = hvar opts = {canvas: canvas,width: w,height: h,//scale: 1,//缩放比例background: '#FFFFFF'//FFF}//调用 html2canvas 组件，将刚刚获取的宽高背景色等数据传进去html2canvas(element[0], opts).then(function (canvas) {//一页pdf的高度（指HTML的高度），【根据实际情况调整】= 元素总长度 / 页数var pageHeight =  1676.4    //canvas.width*1.29//所有导出内容的HTML页面高度var leftHeight = canvas.height//页面的起始位置变量var position = 0//生成的图像的宽高，【根据实际情况调整】var imgWidth = canvas.width/2var imgHeight = canvas.height/2//生成的格式是图片var pageData = canvas.toDataURL('image/jpeg', 1.0)//创建pdf，将内容转化为图片，加入pdfvar pdf = new jsPDF('', 'pt', 'a4')//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight){pdf.addImage(pageData, 'PNG', 100, 0, imgWidth, imgHeight ) //(100,0)表示图片位置，x=100 y=0} else //需要分页{while(leftHeight > 0) {pdf.addImage(pageData, 'PNG',100, position, imgWidth, imgHeight)//JPEGleftHeight -= pageHeightposition -= 841.89 //A4标准高度841.89//若还有剩余，继续添加空白页等待图像填充if(leftHeight > 0) {pdf.addPage()}}}pdf.save("结果.pdf")})this.loading = false}

【技巧】如果不知道pageHeight的大小，可以先写小一点，然后导出来看到实际页数后，可以求出pageHeight = 导出内容的元素总长度 / 页数