使用jspdf将html页面生成pdf文件

1、下载jspdf插件包

npm i jspdf

2、在utils文件夹下创建一个单独的文件(名字无具体要求)

// 页面导出为pdf格式,title表示为下载的标题,html表示要下载的页面
import html2Canvas from 'html2canvas' // 不用单独去下载这个包,下载jspdf包时就已经下载下来了,所以直接用就可以了
import JsPDF from 'jspdf'
import { Loading } from 'element-ui'
let noTableHeight = 0; //table外的元素高度
function htmlPdf(title, html, lableList, type) {// type传有效值pdf则为横版const loading = Loading.service({lock: true,text: '正在生成PDF文件',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})if (lableList) {const pageHeight = Math.floor(277 * html.scrollWidth / 190); //计算pdf高度for (let i = 0; i < lableList.length; i++) { //循环获取的元素const multiple = Math.ceil((lableList[i].offsetTop + lableList[i].offsetHeight) / pageHeight); //元素的高度if (isSplit(lableList, i, multiple * pageHeight)) { //计算是否超出一页let _H = '' //向pdf插入空白块的内容高度_H = multiple * pageHeight - (lableList[i].offsetTop + lableList[i].offsetHeight);let newNode =  getFooterElement(_H);  //向pdf插入空白块的内容const divParent = lableList[i].parentNode; // 获取该div的父节点const next = lableList[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: 4 // 按比例增加分辨率,图片模糊时数值调高点}).then(canvas => {let pdf = new JsPDF('p', 'mm', 'a4'); // A4纸,纵向let ctx = canvas.getContext('2d');let a4w = type ? 277 : 190; let a4h = type ? 190 : 277; // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277let imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度let renderedHeight = 0;while (renderedHeight < canvas.height) {let page = document.createElement('canvas');page.width = canvas.width;page.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 += imgHeight;if (renderedHeight < canvas.height) {pdf.addPage();// 如果后面还有内容,添加一个空页}// delete page;}loading.close()// 保存文件pdf.save(title + '.pdf');});
}// pdf截断需要一个空白位置来补充
function getFooterElement(remainingHeight, fillingHeight = 0) {const newNode = document.createElement('div');newNode.style.background = '#ffffff';newNode.style.width = 'calc(100% + 8px)';newNode.style.marginLeft = '0px';newNode.style.marginBottom = '0px';newNode.classList.add('divRemove');newNode.style.height = (remainingHeight + fillingHeight) + 'px'; return newNode;
}
// 计算是否超出一页
function isSplit(nodes, index, pageHeight) {noTableHeight+= nodes[index].clientHeightreturn nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight  > pageHeight;
}
export default htmlPdf;
<el-button type="primary" @click="exportReport">输出报表</el-button>
<div class="output-report-pdf" ref="outputReportPDF" v-if="outputReportPDFShow"><div class="pdf-item" ref="outputReportPDFItem" v-for="(item, index) in reportPdfData" :key="index" :style="(index + 1) % 2 !== 0 ? 'border-bottom: none': ''"><div class="output-report-img"><el-image style="width: 100%; height: 100%" :src="item.img" fit="contain" @load="handleImage(index)"></el-image></div></div>
</div><script>
// 引入刚才创建的文件
import htmlPdf from '@/utils/htmlToPdf'data() {return {outputReportPDFShow: false}
},
methods: {exportReport() {this.reportPdfData = '从后端获取到的数据'this.outputReportPDFShow = true},// el-image加在完图片时触发handleImage(index) {// 等最后一张图片在页面中加在完再输出成pdf,要不然pdf文件里的图片会不显示if (index + 1 === this.reportPdfData.length) {const name = '测试'// name:保存的文件名称;this.$refs.outputReportPDF:要输出成pdf的总模块;this.$refs.outputReportPDFItem:总模块中的每个item,用于判断是否需要在换页时加个空白框隔开htmlPdf(name, this.$refs.outputReportPDF, this.$refs.outputReportPDFItem)this.outputReportPDFShow = false}}
}
</script><style scoped lang="scss">
.output-report-pdf {.pdf-item {// 其它样式根据具体要求设置,但是每个小模块的宽高有要求,因为要计算小模块是否需要放到下一页显示width: 570px; // pdf的高度:277 * width / 190, width最好是190的倍数;出现小数时容易出错height: 415px; // 高度最好不要超过一页pdf的高度border: 1px solid #000000;.output-report-img {width: 100%;height: 100%;}}           
}
</style>

每页pdf的高度计算公式
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Mybatis】动态SQL标签2

choose (when, otherwise)标签是使用举例 类似switch...case&#xff0c;从上到下匹配&#xff0c;找到匹配的条件&#xff0c;就结束匹配其他的&#xff01; set标签是使用举例 set这个标签是用在更新操作上的 set标签代替sql中的set关键字&#xff0c;可以把set语句后多余的…

大模型产品层出不穷,如何慧眼识珠?

先预祝亲爱的读者们“端午安康“ 大模型百花齐放&#xff0c;选择难上加难 面对眼前层出不穷的大模型产品&#xff0c;许多人会不禁感到困惑&#xff1a;哪个才是真正适合自己的爆款大模型?在中国本土 alone&#xff0c;就有百来个大模型产品&#xff0c;简直是五花八门&…

python怎么下载numpy

安装Python step1&#xff1a;官网下载安装包&#xff1b; https://www.python.org/ 我下载的是python-3.4.4.msi step2&#xff1a;python环境变量配置&#xff1b; 计算机-属性-高级系统设置-环境变量-系统变量 找到PATH&#xff0c;点击编辑&#xff0c;加英文分号;在…

【Text2SQL 论文】T5-SR:使用 T5 生成中间表示来得到 SQL

论文&#xff1a;T5-SR: A Unified Seq-to-Seq Decoding Strategy for Semantic Parsing ⭐⭐⭐ 北大 & 中科大&#xff0c;arXiv:2306.08368 文章目录 一、论文速读二、中间表示&#xff1a;SSQL三、Score Re-estimator四、总结 一、论文速读 本文设计了一个 NL 和 SQL 的…

【设计模式深度剖析】【3】【行为型】【职责链模式】| 以购物中心客户服务流程为例加深理解

&#x1f448;️上一篇:命令模式 设计模式-专栏&#x1f448;️ 文章目录 职责链模式定义英文原话直译如何理解呢&#xff1f; 职责链模式的角色1. Handler&#xff08;抽象处理者&#xff09;2. ConcreteHandler&#xff08;具体处理者&#xff09;3. Client&#xff08;客户…

【Vue】普通组件的注册使用-局部注册

文章目录 一、组件注册的两种方式二、使用步骤三、练习 一、组件注册的两种方式 局部注册&#xff1a;只能在注册的组件内使用 ① 创建 .vue 文件 (三个组成部分) 以.vue结尾的组件&#xff0c;一般也叫做 单文件组件&#xff0c;即一个组件就是组件里的全部内容 ② 在使用的组…

Qt窗口与对话框

目录 Qt窗口 1.菜单栏 2.工具栏 3.状态栏 4.滑动窗口 QT对话框 1.基础对话框QDiaog 创建新的ui文件 模态对话框与非模态对话框 2.消息对话框 QMessageBox 3.QColorDialog 4.QFileDialog文件对话框 5.QFontDialog 6.QInputDialog Qt窗口 前言&#xff1a;之前以上…

Linux驱动开发笔记(三)平台设备驱动

文章目录 前言一、Linux的设备模型1. 总线1.1 bus_type结构体1.2 注册/注销总线 2. 设备2.1 device结构体2.2 内核注册/注销设备 3. 驱动3.1 device_driver结构体3.2 注册/注销驱动 4. attribute属性文件4.1 attribute_group结构体4.2 设备属性文件4.3 驱动属性文件4.3. 总线属…

数组array 和 array的区别

问题 对于数组 array和&array有什么区别呢? 先说答案 array: 指向数组第一个数地址的指针 &array: 指向整个数组地址的指针 所以直接打印的话, 地址是一样的. 但是如果1的话, 那么array是增加sizeof(int)大小, &array是增加sizeof(int) * array.size() 测试 #i…

必应bing国内广告账户如何注册推广呢?

作为全球第二大搜索引擎&#xff0c;必应Bing以其庞大的用户基础和精准的定向能力&#xff0c;为企业提供了拓展市场的绝佳平台。对于许多企业来说&#xff0c;必应Bing广告账户的注册与推广流程可能显得复杂而繁琐。此时&#xff0c;您不妨考虑携手云衔科技&#xff0c;共同开…

程序员职业素养:AI新时代下的机遇与挑战

目录 一、引言二、程序员职业素养的五大要点1. 技术能力2. 沟通能力3. 团队合作4. 责任心5. 敬业精神 三、实际案例解析四、程序员职业素养在实际工作中的应用五、AI新时代的程序员的职业发展建议六、总结七、结语 一、引言 在当今这个科技飞速发展的时代&#xff0c;程序员这…

景区ar互动大屏游戏化体验提升营销力度

从20世纪60年代的初步构想&#xff0c;到如今全球范围内无数企业的竞相投入&#xff0c;AR增强现实技术已成为引领科技潮流的重要力量。而在这一浪潮中&#xff0c;中国的AR公司正以其独特的魅力和创新力&#xff0c;崭露头角。 中国的AR市场正在迎来前所未有的发展机遇。如今&…

将现有web项目打包成electron桌面端教程(一)vue3+vite+js版

说明&#xff1a;后续项目需要web端和桌面端&#xff0c;为了提高开发效率&#xff0c;准备直接将web端的代码打包成桌面端&#xff0c;在此提前记录一下demo打包的过程&#xff0c;需要注意的是vue2或者vue3vitets或者vue-cli的打包方式各不同&#xff0c;如果你的项目不是vue…

CasaOS玩客云如何部署小雅AList并结合内网穿透远程访问海量资源

文章目录 前言1. 本地部署AList2. AList挂载网盘3. 部署小雅alist3.1 Token获取3.2 部署小雅3.3 挂载小雅alist到AList中 4. Cpolar内网穿透安装5. 创建公网地址6. 配置固定公网地址 前言 本文主要介绍如何在安装了CasaOS的玩客云主机中部署小雅AList&#xff0c;并在AList中挂…

Ubuntu系统的k8s常见的错误和解决的问题

K8s配置的时候出现的常见问题 Q1: master节点kubectl get nodes 出现的错误 或者 解决方法&#xff1a; cat <<EOF >> /root/.bashrc export KUBECONFIG/etc/kubernetes/admin.conf EOFsource /root/.bashrc重新执行 kubectl get nodes 记得需要查看一下自己的…

【粽子大师】甜咸粽之争来看大师pick谁

概述 粽子大师是一款专门设计用来回答关于粽子制作和历史的问题的应用。无论用户是想了解甜粽还是咸粽的制作方法&#xff0c;或是希望探索粽子的地域文化差异&#xff0c;粽子大师都能提供详细的解答和指导。 功能详述 角色任务 粽子历史和文化专家: 详细了解甜咸粽子之争的…

C语言:详解gcc驱动程序完成编译、汇编、链接的过程

相关阅读 C语言https://blog.csdn.net/weixin_45791458/category_12423166.html?spm1001.2014.3001.5482 gcc是一个命令&#xff0c;严格意义上说&#xff0c;它只是一个驱动程序&#xff0c;而不是一个编译器。gcc负责调用GNU工具链中的预处理器、编译器、汇编器、链接器等工…

翻译《The Old New Thing》- What’s with this MSH_MOUSEWHEEL message?

Whats with this MSH_MOUSEWHEEL message? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20080806-00/?p21353 Raymond Chen 2008年06月06日 MSH_MOUSEWHEEL 消息是怎么回事&#xff1f; 硬件团队正在研发一种鼠标滚轮设备&#xff0c;并…

matrix-breakout-2-morpheus vulnhub靶场

端口扫描 80 81 需要用户名密码登录 目录扫描 robots.txt 妹用 找不到利用点&#xff0c;换个扫描器再扫 发现新的文件 graffiti.txt graffiti.php 输入的数据Post后会回显到页面上 抓包看看&#xff0c;居然直接传文件路径 发现我们post的数据被写入了graffiti.…

yolov5-ros模型结合zed2相机部署在 Ubuntu系统

前言 本篇文章主要讲解yolov5-ros模型结合zed2相机进行实时检测&#xff0c;经改进实现了红绿灯检测&#xff0c;并输出检测类别与置信度&#xff01; 目录 一、环境配置二、zed2驱动安装三、yolov5-ros功能包配置四、运行官方权重文件四、运行自己权重文件 一、环境配置 1、…