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 扫描工…...
DC综合实战:从约束设置到时序签核的完整指南
1. DC综合实战入门:从RTL到网表的关键路径 第一次接触DC综合时,我盯着满屏的时序报告完全懵了——就像拿到一张没有标注的地图。后来才发现,从RTL代码到合格网表的转化过程,其实是一场与时间赛跑的精密游戏。想象你是个交通调度员…...
告别复杂配置!在Ubuntu 20.04/22.04上快速部署Astra Pro摄像头(含PCL点云实时显示)
在Ubuntu 20.04/22.04上极简部署Astra Pro深度相机的完整指南 深度相机在机器人、三维重建和计算机视觉领域扮演着越来越重要的角色。Astra Pro作为一款性价比极高的深度感知设备,其部署过程却常常让开发者头疼。本文将彻底改变这一现状——通过自动化脚本和现代包管…...
如何为你的技术项目找到完美的编程语言图标?这50+高清资源库就是答案
如何为你的技术项目找到完美的编程语言图标?这50高清资源库就是答案 【免费下载链接】programming-languages-logos Programming Languages Logos 项目地址: https://gitcode.com/gh_mirrors/pr/programming-languages-logos 你是否在为技术文档、博客文章或…...
Windows 11 LTSC 24H2 如何快速安装微软商店:完整解决方案
Windows 11 LTSC 24H2 如何快速安装微软商店:完整解决方案 【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore 对于使用 Windows 11 LTSC 24H2…...
手把手教你用Verilog仿真SMIC/TSMC的SRAM时序:从行为模型到对接APB总线实战
芯片验证工程师的SRAM时序仿真实战指南:从行为建模到APB总线集成 在SoC设计中,SRAM作为关键存储单元,其时序特性直接影响系统性能。不同于教科书中的理想模型,实际工程中需要精确模拟SMIC/TSMC等厂商提供的SRAM宏单元特性。本文将…...
MPU6050 DMP库移植踩坑全记录:从I2C通信失败到欧拉角飘移的解决方案
MPU6050 DMP库移植实战:从硬件调试到数据优化的完整解决方案 1. 硬件连接与I2C通信问题排查 移植MPU6050 DMP库时,硬件连接问题往往是最先遇到的障碍。许多开发者习惯直接复制原理图,却忽略了几个关键细节: 上拉电阻配置误区 I…...
SEONIB 如何重新定义电商卖家的全球增长路径
一个普遍存在的认知误区及其现实后果 在当前的数字商业环境中,存在一个广泛流传但极具误导性的观点,即搜索引擎优化是一项仅适用于大型企业或拥有专门技术团队的复杂工程。这种认知导致无数电商卖家——无论是独立站运营者、平台卖家,还是新…...
校招面试PCB岗,没有项目经验就拿这三点补
不瞒各位说,当初找工作的时候,简历上那个"项目经历"栏差点给我整秃了。你说嵌入式开发、电子竞赛,好歹还能写点东西。但PCB设计这东西,学校教的和实际用的,感觉是两个世界。投了几个大厂的PCB岗,…...
BaiduPCS-Go:5分钟掌握命令行网盘管理核心技术
BaiduPCS-Go:5分钟掌握命令行网盘管理核心技术 【免费下载链接】BaiduPCS-Go iikira/BaiduPCS-Go原版基础上集成了分享链接/秒传链接转存功能 项目地址: https://gitcode.com/GitHub_Trending/ba/BaiduPCS-Go 还在为百度网盘繁琐的图形界面和限速问题困扰&am…...
Unity3D超高清照片墙实战:如何突破8192x8192分辨率限制并稳定运行24小时?
Unity3D超高清照片墙实战:突破8192x8192分辨率限制与24小时稳定运行方案 当我在上海某商业综合体首次看到那块横跨三层楼的巨型互动照片墙时,立刻被其视觉冲击力震撼——直到客户递给我一份96004320分辨率的项目需求书。这个数字让我手指一颤:…...
