长内容生成pdf 防止内容pdf分页隔断

本案例是根据HTML内容文本先转换成图片，再把图片生成pdf，不一定适合所有项目，只是项目工作中的记录

生成pdf

import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
Vue.prototype.getPdfFromHtml = function(ele, pdfFileName,callback,isExport=true) {let eleW = ele.offsetWidth// 获得该容器的宽//   let eleH = ele.offsetHeight // 获得该容器的高let eleH = ele.scrollHeight// 获得该容器的高let eleOffsetTop = ele.offsetTop// 获得该容器到文档顶部的距离let eleOffsetLeft = ele.offsetLeft// 获得该容器到文档最左的距离 var canvas = document.createElement('canvas')var abs = 0let win_in = document.documentElement.clientWidth || document.body.clientWidth// 获得当前可视窗口的宽度（不包含滚动条）let win_out = window.innerWidth// 获得当前窗口的宽度（包含滚动条） if (win_out>win_in) {// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半abs = (win_out - win_in) / 2// 获得滚动条宽度的一半}canvas.width = eleW * 2// 将画布宽&&高放大两倍canvas.height = eleH * 2var context = canvas.getContext('2d')context.scale(2, 2) // 增强图片清晰度context.translate(-eleOffsetLeft - abs, -eleOffsetTop) html2canvas(ele, {dpi:300,useCORS:true//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。}).then(canvas=> {var contentWidth = canvas.widthvar contentHeight = canvas.height//一页pdf显示html页面生成的canvas高度;var pageHeight = (contentWidth / 592.28) * 841.89 // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致//未生成pdf的html页面高度var leftHeight = contentHeight//页面偏移var position = 0//a4纸的尺寸[595.28,841.89],单位像素，html页面生成的canvas在pdf中图片的宽高var imgWidth = 595.28var imgHeight = (595.28 / contentWidth) * contentHeightvar pageData = canvas.toDataURL('image/jpeg', 1.0)var pdf = new JsPDF('', 'pt', 'a4')//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (leftHeight<pageHeight) {//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；pdf.addImage(pageData, 'JPEG', 25, 25, imgWidth-50, imgHeight-50)// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);} else {// 分页var i = 0while (leftHeight>0) {i = i+1pdf.addImage(pageData, 'JPEG', 25, position, imgWidth-50, imgHeight-50)leftHeight -= pageHeightposition -= 841.89//避免添加空白页if (leftHeight>0) {pdf.addPage()}}}if(isExport) pdf.save(pdfFileName + '.pdf')if (callback) {const blob = pdf.output('blob')callback(blob)}})}

对内容进行防隔断

outPutPdfFn () {let vm = this;const A4_WIDTH = 592.28;const A4_HEIGHT = 841.89;// $myLoading 自定义等待动画组件，实现导出事件的异步等待交互vm.$nextTick(() => {// dom的id。let target = document.getElementById('sprintReport');let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT;// 获取分割dom，此处为class类名为item的domlet lableListID = document.getElementsByClassName('item');// 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割for (let i = 0; i < lableListID.length; i++) {let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight);if (this.isSplit(lableListID, i, multiple * pageHeight)) {let divParent = lableListID[i].parentNode; // 获取该div的父节点let newNode = document.createElement('div');newNode.className = 'emptyDiv';newNode.style.background = '#ffffff';let _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight);newNode.style.height = _H + 150 + 'px';newNode.style.width = '100%';let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点// 判断兄弟节点是否存在console.log(next);if (next) {// 存在则将新节点插入到div的下一个兄弟节点之前，即div之后divParent.insertBefore(newNode, next);} else {// 不存在则直接添加到最后,appendChild默认添加到divParent的最后divParent.appendChild(newNode);}}}// 最后在此处调用生成pdf的方法this.onUploadPDF()});},// 判断是否需要添加空白divisSplit (nodes, index, pageHeight) {// 计算当前这块dom是否跨越了a4大小，以此分割if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {return true;}return false;},

自动上传生成的pdf

onUploadPDF(){const loading = this.$loading({text: '报告上传中...',showText: true,spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.8)'})this.getPdfFromHtml(this.$refs.sprintReport, this.dialogTitle,(blob)=>{var myFile = new File([blob], this.reportCoverName + '.pdf')const data = new FormData()data.append('files',myFile)data.append('dataId',this.infoData.reportId)data.append('dataCategory','t_report')this.$su.ajax({url:this.$api.uploadFile,type:'post',contentType:'multipart/form-data',data}).then(res=>{// 更新报告fileIdthis.$su.ajax({url:this.$api.report.updateFile,type:'post',data:{reportId:this.infoData.reportId,fileId:res.data[0].fileId}}).then(res=>{loading.close()this.$message.success('上传成功')})}).catch(err=>{this.$message.error('上传失败')})},false)},

另外的外码

// A4封面高度
.cover{height: 2127px;
}

最后效果

长内容生成pdf 防止内容pdf分页隔断相关推荐

ChatGPT正当时，让我们一起深耕智能内容生成和智能内容增强领域
ChatGPT以其强大的信息整合和对话能力惊艳了全球,在自然语言处理上面表现出了惊人的能力.很多人都预测 2023 年将是 AI 生成之年,也许我们将迎来继农业革命.工业革命以来的第三种通用技术的普及 ...
阿士比亚：搜索团队智能内容生成实践
一.项目背景 1.1 什么是智能内容生成? 更准确的定义应该是智能文本内容生成,指的是训练机器模型,智能生成单品推荐理由.多商品清单文章一类的文本型内容,显然,与智能内容生成相对的概念 ...
淘宝总知道你要什么？万字讲述智能内容生成实践 | 技术头条
参加「CTA 核心技术及应用峰会·杭州」,请扫码报名 ↑↑↑ 作者 | 清淞来源 | 清淞的知乎专栏专栏地址: https://zhuanlan.zhihu.com/p/33956907 本文主要 ...
使用Select.HtmlToPdf 把html内容生成pdf文件
概述 .NET的SelectPdf Html到Pdf转换器-社区版是.NET的SelectPdf库中提供的功能强大的html到pdf转换器的免费版本. 转换器提供了许多强大的选项(将任何网页转换为pd ...
flowable 中文文档_取出word文档文字内容生成加了目录、标号和页码的PDF文件
word文档内的一页: 将文本取出来,生成自定义格式的PDF文件: 从word取出文本时标题的标号和页码是取不出来的,要自己加.另外就是目录也要自己生成和添加: 代码和解释如下: from repor ...
java pdf 修改内容_生成PDF全攻略之在已有PDF上添加内容的实现方法
项目在变,需求在变,不变的永远是敲击键盘的程序员..... PDF 生成后,有时候需要在PDF上面添加一些其他的内容,比如文字,图片.... 经历几次失败的尝试,终于获取到了正确的代码书写方式. 在此 ...
pdfboxiText生成PDF文件格式及读取PDF文件内容的小示例--完美支持中文版
最近项目中有个需求需要将数据库中的数据导出到PDF文件中,所以在网上查找了相关的开源框架--pdfbox&itext 于是乎写了一个简单的工具类,如有需要的可以直接拿去用,切勿跟俺客气~. 本 ...
如何用Python批量提取PDF文本内容？
本文为你展示,如何用Python把许多PDF文件的文本内容批量提取出来,并且整理存储到数据框中,以便于后续的数据分析. 问题最近,读者们在后台的留言,愈发五花八门了. 写了几篇关于自然语言处理的文章 ...
python怎么读取pdf为文本_轻松用Python批量提取PDF文本内容，这个小技巧告诉你！...
轻松用Python批量提取PDF文本内容,这个小技巧告诉你!-1.jpg (22.73 KB, 下载次数: 0) 2018-9-7 08:33 上传本文为你展示,如何用Python把许多PDF文件的 ...

长内容生成pdf 防止内容pdf分页隔断

长内容生成pdf 防止内容pdf分页隔断相关推荐

最新文章

热门文章