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 扫描工…...
[物理理论]全域场相互作用模型·阿雪心学·道场—东方仙盟天道量子
引言东方仙盟、阿雪心学、道场,是东方玄学体系中相互关联、辩证统一的三大核心范畴:东方仙盟是群体修持者的集合与共振共同体,阿雪心学是个体修心、调控自身场域的核心指导,道场是连接个体与集体、承载场能、实现场域交互的物理与…...
终极指南:使用OpenBoardView免费开源工具高效查看和分析PCB电路板文件
终极指南:使用OpenBoardView免费开源工具高效查看和分析PCB电路板文件 【免费下载链接】OpenBoardView View .brd files 项目地址: https://gitcode.com/gh_mirrors/op/OpenBoardView 你是否曾经遇到过需要查看.brd电路板文件却找不到合适的软件?…...
OpenClaw 这样卸载才够干净,全程 5 大步
大家好,这里是小凡 AI 研习社,我是小凡。 之前在《安装教程》和《安装教程补充版》中,我们详细讲解了 OpenClaw 的安装流程,本节课就来完整介绍它的卸载方法。 一、哪些地方有 OpenClaw 的相关内容? OpenClaw 要想卸…...
深入解析安路科技PH1系列FPGA的ERAM架构:从BRAM到高效存储方案
1. PH1系列FPGA的ERAM架构概览 第一次拿到安路科技PH1系列FPGA开发板时,我就被它的ERAM(嵌入式随机存取存储器)设计惊艳到了。相比传统FPGA的BRAM(块随机存取存储器),PH1的ERAM在架构上做了很多创新。每个E…...
DeepSeek-R1-Distill-Qwen-1.5B快速部署:vLLM启动,GPU显存优化方案
DeepSeek-R1-Distill-Qwen-1.5B快速部署:vLLM启动与GPU显存优化方案 1. 模型与框架介绍 1.1 DeepSeek-R1-Distill-Qwen-1.5B模型特点 DeepSeek-R1-Distill-Qwen-1.5B是DeepSeek团队基于Qwen2.5-Math-1.5B基础模型,通过知识蒸馏技术融合R1架构优势打造…...
国民技术 N32G457VEL7 LQFP-100 单片机
关键特性 内核CPU一32位ARM Cortex-M4内核FPU,单周期硬件乘除法指令,支持DSP指令和MPU 内置8KB指令缓存,支持Flash加速单元执行程序0等待最高主频144MHz,180DMIPS 加密存储器 硬件ECC校验,10万次擦写次数,10年数据保持…...
B站爬虫实战:手把手教你破解w_rid签名与oid参数(附完整Python代码)
B站数据采集实战:深度解析w_rid签名与oid参数生成机制 每次打开B站评论区,那些海量的用户互动数据背后,都藏着开发者们最想破解的秘密。作为国内最大的年轻人文化社区,B站的数据价值不言而喻,但它的防护机制也让不少爬…...
【JVM深度解析】第25篇:volatile与synchronized深度原理
摘要 volatile 和 synchronized 是 Java 并发编程中最常用的两个关键字,但它们的底层原理却大不相同。volatile 通过内存屏障保证可见性和有序性(无原子性),synchronized 通过监视器锁保证原子性、可见性和有序性。本文深入解析两…...
从Win32 API到ACLLib:浙大翁恺老师如何为C语言初学者‘封装’出一个图形库?
从Win32 API到ACLLib:C语言图形编程的教学革命 在计算机科学教育的漫长河流中,C语言始终扮演着基石的角色。但当教学触及图形界面编程时,传统的Win32 API就像一道陡峭的悬崖,让无数初学者望而却步。浙大翁恺老师团队开发的ACLLib&…...
终极解密:OpenCore如何解决PC安装macOS的三大核心挑战
终极解密:OpenCore如何解决PC安装macOS的三大核心挑战 【免费下载链接】OpenCore-Install-Guide Repo for the OpenCore Install Guide 项目地址: https://gitcode.com/gh_mirrors/op/OpenCore-Install-Guide 对于技术爱好者和中级用户而言,OpenC…...
