html2canvas + JsPDF.js 导出pdf分页时的问题
问题描述
前一段时间 实现了html2canvas + jspdf.js 导出pdf的功能 项目当时没有测试做完就先搁置 最近项目要上线发现分页时问题 这篇文章记录一下之前的bug
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'
export function savePdf(el, title) {html2canvas(el, {useCORS: true,allowTaint: true,dpi: 192,//导出pdf清晰度scale:2,}).then(async (canvas) => {// 新建JsPDF对象const pdf = new JsPDF("p", "mm", "a4");let ctx = canvas.getContext('2d'),a4w = 192, a4h = 277, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4显示比例换算一页图像的像素高度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();//如果后面还有内容,添加一个空页page = null}pdf.save(title + ".pdf");}).catch((e) => {console.log(e)}).finally(() => {});
}

分页的pdf 就能正常的展示
参考地址: https://www.cnblogs.com/BoyTNT/p/11711439.html
相关文章:
html2canvas + JsPDF.js 导出pdf分页时的问题
问题描述 前一段时间 实现了html2canvas jspdf.js 导出pdf的功能 项目当时没有测试做完就先搁置 最近项目要上线发现分页时问题 这篇文章记录一下之前的bug import html2canvas from html2canvas; import JsPDF from jspdf export function savePdf(el, title) {html2canva…...
Linux系统Docker部署StackEdit Markdown并实现公网访问本地编辑器
文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…...
从Spring Boot应用上下文获取Bean定义及理解其来源
前言 在Spring框架中,Bean是组成应用程序的核心单元。特别是在Spring Boot项目中,通过使用SpringApplication.run()方法启动应用后,我们可以获得一个ConfigurableApplicationContext实例,这个实例代表了整个应用程序的运行时环境…...
如何处理网络攻击对系统造成的损害?
网络攻击对系统造成的损害是当今企业面临的一大挑战。随着互联网的普及和数字化转型的加速,企业的运营越来越依赖于网络,但同时也面临着越来越多的网络安全威胁。一旦企业遭受网络攻击,其系统可能会遭受不同程度的损害,导致数据泄…...
数字IC后端设计利器 - 《Innovus的基本使用流程和命令》(附下载)
Innovus作为数字后端工具的后起之秀,在先进工艺下已经取得了令人瞩目的成就。其在Run time上的优势令人刮目,在timing、DRC、IR-drop上的结果更是让人竖起大拇指。 数字IC后端工程师学习Cadence公司的Innovus工具非常重要,因为Innovus是一款…...
Blender中四种不同的几何体类型(网格、曲线、体积和实例 )
网格、曲线、体积和实例是Blender中四种不同的几何体类型。它们各有特点,适用于不同的建模场景。 网格是由顶点、边和面组成的三维对象。它是Blender中最常用的几何体类型,可以用来创建各种模型,例如角色、场景、道具等。 曲线是一维对象&a…...
Vue3 学习笔记(Day5)
「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。推荐先按顺序阅读往期内容: 1. Vue3 学习笔记(Day1) 2. Vue3 学习笔记(Day2&…...
【网络编程】实现服务器端和客户端的通讯的简单程序
套接字是什么? 服务端接受连接请求的套接字创建过程可分为以下4步: 1、调用socket创建套接字 2、调用bind函数分配IP地址和端口号 3、调用listen函数转换为可接受请求状态 4、调用accept函数受理连接请求 1、调用socket创建套接字 serv_sock soc…...
如何在Portainer中部署Nginx容器并制作一个本地站点结合cpolar发布至公网可访问
文章目录 前言1. 安装Portainer1.1 访问Portainer Web界面 2. 使用Portainer创建Nginx容器3. 将Web静态站点实现公网访问4. 配置Web站点公网访问地址4.1公网访问Web站点 5. 固定Web静态站点公网地址6. 固定公网地址访问Web静态站点 前言 Portainer是一个开源的Docker轻量级可视…...
Mysql的储存引擎
储存引擎介绍 1. 文件系统 操作系统存取数据的一种机制 2. 文件系统类型 不管使用什么文件系统,数据内容不会变化 不同的是,存储空间、大小、速度 3. MySQL存储引擎 可以理解为,MySQL的“文件系统”,只不过功能更加强大 4. MySQL…...
【查漏补缺你的Vue基础】Vue数据监听深度解析
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
大语言模型LLM发展历程中的里程碑项目:国内外技术革新重塑自然语言处理(LLM系列02)
文章目录 标题:大语言模型LLM发展历程中的里程碑项目:国内外技术革新重塑自然语言处理(LLM系列02) 引言早期奠基阶段Transformer架构引领变革GPT系列的重大进展国内外标志性LLM项目LLM在中国的应用实践LLM研究面临的挑战与应对策略…...
JS二进制文件转换:File、Blob、Base64、ArrayBuffer
类型转换 1. Blob、File → Base64 function fileToDataURL(file) {let reader new FileReader();reader.readAsDataURL(file);reader.onload function (e) {return reader.result;}; }2. Base64 → Blob、File // Base64 转为 Blob function dataURLToBlob(fileDataURL) …...
编译opencv gpu版的条件
一、具备以下条件即可编译opencv gpu: 1、 终端设备必须有独立显卡。cmd窗口:nvidia-smi查看显卡信息 2、下载并安装CUDA Toolkit(根据显卡下载对应的CUDA Toolkit软件)、cuDNN(根据CUDA版本下载对应的cuDNN࿰…...
List集合的Stream流式操作实现数据类型转换
问题现象: 最近在项目中,有一些逻辑想用List集合的Stream流式操作来快速实现,但由于之前没做好学习笔记和总结,导致一时间想不起来,只能用本方法来解决,如下: 可以看出来代码量是比较冗长的&…...
Ubuntu 20.04.6 LTS下edge浏览器点击图标没反应
1.网上的解决方案 解决Ubuntu系统下启动root账户后Linux版本edge浏览器无法启动等 2.采用的解决方案 之前我一直是在官网下载 Microsoft Edge下载,安装,卸载,重装的stable版本,然后安装,始终没有效果。 最后利用Linux…...
php基础学习之错误处理(其一)
一,错误处理的概念 错误处理指的是系统(或者用户)在执行某些代码的时候,发现有错误,就会通过错误处理的形式告知程序员,俗称报错 二,错误分类 语法错误:书写的代码不符合 PHP 的语法规范,语法错…...
Nginx 解析漏洞复现
环境搭建 下载之后上传到虚拟机并解压 进入这个路径 (root?kali)-[~/vulhub-master/nginx/nginx_parsing_vulnerability]就能看到有docker-compose.yml 启动环境 正常显示 增加/.php后缀,被解析成PHP文件: 漏洞原因:开启了cgi.fix_pathin…...
JQMobile Loader Widget 遮罩层改造
最近在用jqmobile 做一个混合APP项目时候用到 jqmobile1.4.3提供的Loader Widget控件,但是这个控件本身是一个loading弹出层,这个弹出层弹出之后,用户还是可以去点击按钮,重复发送请求,为了防止重复提交,我想了两种办法, 1,在loading弹出层弹出之后,让按钮不可用.但是form表单…...
练习 2 Web [ACTF2020 新生赛]BackupFile 1
[ACTF2020 新生赛]BackupFile 1 Web常规题目 首先尝试查找常见的前端页面index.php之类的,没找到 题目有个“BackupFile”——备份文件 尝试用工具遍历查找相关的文件 御剑没扫出来,搜索搭建好dirsearch后,扫出来的index.php.bak 扫描工…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码":Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力,从金融交易到交通管控,这些关乎国计民生的关键领域…...
如何配置一个sql server使得其它用户可以通过excel odbc获取数据
要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据,你需要完成以下配置步骤: ✅ 一、在 SQL Server 端配置(服务器设置) 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到:SQL Server 网络配…...
