完美解决html2canvas + jsPDF导出pdf分页内容截断问题

代码地址：https://github.com/HFQ12333/export-pdf.git

html2canvas + jspdf方案是前端实现页面打印的一种常用方案，但是在实践过程中，遇到的最大问题就是分页截断的问题：当页面元素超过一页A4纸的时候，连续的页面就会因为分页而导致内容被截断，进而影响了pdf的可读性。

由于网上关于分页截断的解决思路比较少，所以特意将此次的解决方案记录下来。

使用 JSPDF 和 html2canvas 创建简单的 PDF文件

首先，我们开始使用 JSPDF 和 html2canvas 生成一个简单的 PDF文件。

创建一个 JSPDF 实例

创建一个 JSPDF 实例，设置页面的大小、方向和其他参数。参考官网可以写一个很简单的实例

var doc = new jsPDF({orientation: 'landscape',unit: 'in',format: [4, 2]
}doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

生成一个pdf文件，并且在文件中写入一定内容，其实JSPDF这个库就能做到。

但是很多业务场景下，我们的目标内容会更复杂，而且还要考虑样式，所以最好的方式是引入html2canvas这个库，将页面元素转换成base64数据，然后贴在pdf中(使用addImage方法），这样就能保证页面的内容。

引入了html2canvas库后，我们更多关注是利用现成组件库、框架或者原生html和css实现更复杂的页面内容。

引入 html2canvas

使用 html2canvas 捕捉 HTML 内容或特定的 HTML 元素，并将其转换为 Canvas。其中，html2canvas 函数的主要用法是：

html2canvas(element, options);
  • element： 要渲染为 canvas 的 HTML 元素。这可以是一个 DOM 元素，也可以是一个选择器字符串，表示需要渲染的元素。
  • options（可选）： 一个包含配置选项的对象，用于定制 html2canvas 的行为。

以下是一些常见的配置选项：

  • allowTaint（默认值: false）： 是否允许加载跨域的图片，默认为 false。如果设为 true，html2canvas 将尝试加载跨域的图片，但在某些情况下可能会受到浏览器的限制。
  • backgroundColor（默认值: #ffffff）： canvas 的背景颜色。
  • useCORS（默认值: false）： 是否使用 CORS（Cross-Origin Resource Sharing）来加载图片。如果设置为 true，则 html2canvas 将尝试使用 CORS 来加载图片。
  • logging（默认值: false）： 是否输出日志信息到控制台。
  • width 和 height： canvas 的宽度和高度。如果未指定，则默认为目标元素的宽度和高度。
  • scale（默认值: window.devicePixelRatio）： 缩放因子，决定 canvas 的分辨率。

下面是一个简单的demo，可以看到html2canvas能够将dom元素转化为一张base64图片，将鼠标选中元素，可以感受到图片和文字的不同。

<div id="capture" style="padding: 10px; background: #f5da55"><h4 style="color: #000; ">Hello world!</h4>
</div>html2canvas(document.querySelector("#capture")).then(canvas => {document.body.appendChild(canvas)
});

将html2canvas转化的图片放到pdf中

这一步我们需要使用JSPDF 的addImage方法，其语法如下：

addImage(imageData, format, x, y, width, height, alias, compression)
  • imageData - 要添加的图像数据。可以是图像的 URL、图像的 base64 编码字符串或图像的二进制数据
  • format - 图像的格式。可以是 "JPEG"、"PNG" 或 "TIFF"。
  • x - 图像在 PDF 文档中的 x 坐标。
  • y - 图像在 PDF 文档中的 y 坐标。
  • width - 图像的宽度。
  • height - 图像的高度。
  • alias - 图像的别名。此别名可用于在 PDF 文档中引用图像。
  • compression - 图像的压缩级别。可以是 "NONE"、"FAST" 或 "SLOW"。

下面是一串示例代码：

import jsPDF from 'jspdf';export default function addImageUsage() {const doc = new jsPDF();const imageData = 【替换成base64数据流】;doc.addImage(imageData, 'png', 0, 0, 10, 10);doc.addImage(imageData, 'png', 100, 100, 10, 10);doc.addImage(imageData, 'png', 200, 200, 10, 10);drawNet(doc);doc.save('test.pdf');
}const drawNet = (doc) => {const gap = 10;const start = [0, 0];const end = [595.28, 841.89];// 所有横线for (let i = start[0]; i < end[0]; i = i + gap) {doc.line(i, 0, i, end[0]);}// 所有纵线for (let j = start[1]; j < end[1]; j = j + gap) {doc.line(0, j, end[1], j);}
};

此示例将在 PDF 文档（默认是A4纸大小，宽高为[595.28, 841.89]像素）的 (10, 10) 、(100, 100) 、(200, 200) 坐标处，添加一张png 图像。图像的宽度和高度将分别为 10 和 10 像素，为了了解pdf中的坐标系统，此示例还在pdf文档中生成了间距为10px的网格系统。

JSPDF 和 html2canvas结合起来用

了解了上面的三个关键点，接下来我们将这三个步骤串联起来，实现一个基本的html→pdf的方案。大致步骤如下：

  1. 写一个基本html页面
  2. 创建jspdf实例
  3. 获取页面的dom节点，使用html2canvas将其转化为base64数据流
  4. 将base64数据流装载到jspdf提供的addImage方法中
  5. 保存pdf

基于这5个步骤，可以实现基本的页面打印。

import html2canvas from 'html2canvas';
import jsPDF, { RGBAData } from 'jspdf';// 将元素转化为canvas元素
// 通过 放大 提高清晰度
// width为内容宽度
async function toCanvas(element: HTMLElement) {if (!element) return { width: 0, height: 0 };// canvas元素const canvas = await html2canvas(element, {scale: window.devicePixelRatio * 2, // 增加清晰度useCORS: true // 允许跨域});// 获取canvas转化后的宽高const { width: canvasWidth, height: canvasHeight } = canvas;// 转化成图片Dataconst canvasData = canvas.toDataURL('image/jpeg', 1.0);return { width: canvasWidth, height: canvasHeight, data: canvasData };
}/*** 生成pdf(A4多页pdf截断问题， 包括页眉、页脚 和 上下左右留空的护理)*/
export async function generatePDF({/** pdf内容的dom元素 */element,/** pdf文件名 */filename
}) {if (!(element instanceof HTMLElement)) {return;}const pdf = new jsPDF();// 一页的高度， 转换宽度为一页元素的宽度const {width: imageWidth,height: imageHeight,data} = await toCanvas(element);// 添加图片function addImage(_x: number,_y: number,pdfInstance: jsPDF,base_data:| string| HTMLImageElement| HTMLCanvasElement| Uint8Array| RGBAData,_width: number,_height: number) {pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height);}addImage(0, 0, pdf, data!, imageWidth, imageHeight);return pdf.save(filename);
}

多页：比例缩放+循环移位

通常，在我们的实践中，会发现2个问题：

  • 生成的pdf内容与实际的页面元素比例不一致
  • 页面内容超出一页pdf的高度，但是生成的pdf只有一页，没有展示全部的页面信息

这两个问题的解决方案是等比例缩放+循环移位：

  • 等比例缩放

通过比例缩放，实现页面内容等比例展示在pdf文档中

令页面元素的宽高为x, y（转化成canvas图片的宽高），pdf文档的宽高为w, h。因为高度可以通过加页延伸，所以可以按照宽度进行缩放，缩放后的图片高度可以通过下列公式计算

y_scaled=(w/x)\*yy\_{scaled} = (w / x) \* yy_scaled=(w/x)\*y

  • 循环移位

如果页面的高度超出了pdf文档的高度，即y > h，使用addPage方法添加一页即可。但是在新的一页中，我们的图片内容的高度需要调整。

假设y = 2 * h，这意味我们需要两页才能完整得展示页面内容。在一页pdf中，图片在起始位置插入即可，即

PDF.addImage(pageData, 'JPEG', 0, 0, x, y)// 注意x,y 是缩放后的大小

在第二页pdf中，图片的纵向位置需要调整一页pdf的高度，即

PDF.addImage(pageData, 'JPEG', 0, -h, x, y)// 注意x,y 是缩放后的大小

通过循环计算剩余高度，然后不停调整纵向位置移动base64的图片位置，可以解决多页的问题。

分页截断的挑战

尽管 JSPDF 和 html2canvas 是功能强大的工具，但是他们也有很多槽点，比如得手动分页，手动处理分页截断的问题。等你实践到这一步，就开始面临分页截断的问题，类似的问题也有网友在Github上提出，但是底下依然没有很好的解决思路。

处理分页截断的原理就是在使用addImage之前，将html进行分页，通过维护一个高度位置数据，来记录每次循环迭代addImage的位置。

从高到低遍历维护一个分页数组pages，该数组记录每一页的起始位置，如：pages[0] 对应 第一页起始位置，pages[1] 对应第二页起始位置

接下来我们重点讨论如何将页面进行切割，然后生成pages这个数组。

假设页面的高度是1500，pdf宽高是[500, 900]，如果不用处理分页截断的问题，我们可以想到第一页（0-900）是用来承载页面从高度为0到900的信息；

第二页（900-1800）是用来承载页面从高度900到1500的，所以pages数组为[0, 900]。

如果要处理分页截断呢，这时候就需要计算页面元素的距离pdf文档起始位置的高度h1，以及该元素的内部高度h2，通过这两个高度来判断这个元素要不要放在下一页，防止截断，示意图如下：

如果h1 + h2 > 页面高度， 这时候说明这个元素不处理的就会被分页截断，所以应该要把这个元素放到第二页去渲染，这就意味着pages记录的数据要变化，示意图如下，可以看到pages[1]我们往上调整了，比第二页pdf的起始位置更高。

说明渲染第二页pdf的时候，要从h1开始渲染，pages数组为[0, h1]，解释为第一页pdf渲染页面高度区域为0-900, 第二页pdf渲染html高度区域为h1-1500。注意到第一页渲染的时候到尾部的时候，**会有部分内容和第二页头部内容重合。**因为h1到900这部分的内容肯定会渲染，这部分内容一直都是页面元素，我们改变pages[1]的值的原因只是创建一个副本，让页面看起来内容没有被截断。

为了解决这个问题（为了美观），我们用填充一块白色区域遮掉它！此处使用jspdf的rect和setFillColor方法，把重合的区域遮白处理。

pdf.setFillColor(255, 255, 255);
pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');

如何获得h1和h2

上面我们谈到了h1和h2，其中h1是元素盒子的上边距到打印区域的高度（比例缩放后的高度），h2是元素盒子的内部高度。

计算h1: getBoundingClientRect方法

const rect = contentElement.getBoundingClientRect() || {};
const topDistance = rect.top;
return topDistance;

计算h2：

offsetHeight方法

值得注意的是，因为打印区域的html元素不一定是从窗口顶部开始，所以为了计算实际的h1(元素到打印区域的顶部距离），可以采用这样的方法：
●用getBoundingClientRect方法计算元素到窗口顶部的距离
●循环打印之前将pages信息针对第一个元素进行一个高度校准。
 

/ 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，
// 所以要把它修正，让其值是以真实的打印元素顶部节点为准
const newPages = pages.map((item) => item - pages[0]);

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

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

相关文章

c++ 谷歌的招聘 题解

c++ 谷歌的招聘 题解

题目描述 2004 年 7 月,谷歌在硅谷的 101 号公路边竖立了一块巨大的广告牌(如下图)用于招聘 内容超级简单,就是一个以 .com 结尾的网址,而前面的网址是一个 10 位素数,这个素数是自然常数 e 中最早出现的 10 位连续数字 能找出这个素数的人,就可以通过访问谷歌的这个网站进入…
阅读更多...
CSS”叠叠乐“——WEB开发系列16

CSS”叠叠乐“——WEB开发系列16

在现代前端开发中&#xff0c;CSS 是控制网页外观和布局的核心工具。随着项目的复杂化和样式规则的增加&#xff0c;CSS 层叠&#xff08;cascade&#xff09;变得更加重要。为了更好地管理和控制样式规则的应用&#xff0c;CSS 引入了层叠层&#xff08;cascade layers&#x…
阅读更多...
Java—Lambda表达式

Java—Lambda表达式

注意&#xff1a;如果无法判断一个方法是否为函数式接口&#xff0c;可以查看该方法的源码中是否携带FunctionalInterface注解。 lambda表达式再简化写法规则如下。 1. 参数类型可以省略不写 2. 如果只有一个参数&#xff0c;参数的 "( )" 也可以省略。 3. 如果Lambd…
阅读更多...
【PyTorch】神经网络的基本骨架-nn.Module的使用以及convolution-layers卷积层介绍

【PyTorch】神经网络的基本骨架-nn.Module的使用以及convolution-layers卷积层介绍

前提文章目录 【PyTorch】深度学习PyTorch环境配置及安装【详细清晰】 【PyTorch】深度学习PyTorch加载数据 【PyTorch】关于Tensorboard的简单使用 【PyTorch】关于Transforms的简单使用 【PyTorch】关于torchvision中的数据集以及dataloader的使用 文章目录 前提文章目录nn.…
阅读更多...
AI编程工具的力量：以AWS Toolkit与百度Comate为例，加速程序员开发效率

AI编程工具的力量：以AWS Toolkit与百度Comate为例，加速程序员开发效率

在当今的数字化转型浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;技术不仅重塑了众多行业&#xff0c;也为软件开发领域带来了革命性的变化。AI编程工具&#xff0c;凭借其智能化的特性&#xff0c;正在成为程序员提高开发效率、优化代码质量和加速产品迭代的重要助力…
阅读更多...
SQL注入（原理、分类、union、POST注入）

SQL注入（原理、分类、union、POST注入）

目录 【学习目标、重难点知识】 【学习目标】 【重难点知识】 SQL注入简介 SQL注入原理 SQL注入类型 MySQL与SQL注入的相关知识 information_schema 数据库的结构 数据库查询语句 limit的用法 需要记住的几个函数 注释符号 SQL注入探测方法 SQL注入漏洞攻击流程…
阅读更多...
以简单的例子从头开始建spring boot web多模块项目(五)-thymeleaf引擎

以简单的例子从头开始建spring boot web多模块项目(五)-thymeleaf引擎

继续向里面加&#xff0c;这次是引入thymeleaf渲染引擎。 使用这个引擎的很多&#xff0c;主要是以下几个优点&#xff1a; Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显…
阅读更多...
七牛云 CDN 视频瘦身，为视频分发「减负增效」

七牛云 CDN 视频瘦身，为视频分发「减负增效」

随着智能设备的普及&#xff0c;以及各种以分享视频为主的平台的兴起&#xff0c;人们记录生活、分享故事的方式不再局限于文字和图片&#xff0c;而是越来越多地通过视频来表达。视频也不再需要复杂的制作过程&#xff0c;变得随手可得。 然而&#xff0c;视频在互联网上的爆炸…
阅读更多...
65 华为交换机CE6800基础配置

65 华为交换机CE6800基础配置

一 IPV6 使能配置思路 1 改华为交换机的名字 <huaweice65>sys Enter system view, return user view with return command. [~huaweice65]sysname HWCE6800 [*huaweice65]quit Warning: Uncommitted configurations found. Are you sure to commit them before exiting?…
阅读更多...
抖音集团 FlinkSQL 性能优化探索及实践

抖音集团 FlinkSQL 性能优化探索及实践

本文作者&#xff1a;李精卫 更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 背景 随着抖音集团内部对流式任务的需求不断增长&#xff0c;Flink SQL作为一种低成本接入手段&#xff0c;已经在内部多个方向上得到…
阅读更多...
K8S系列——（二）、K8S部署RocketMQ集群

K8S系列——（二）、K8S部署RocketMQ集群

1、环境准备 要将RocketMQ部署到K8S上&#xff0c;首先你需要提前准备一个K8S集群环境&#xff0c;如图我已经准备好了一个版本为 v1.28.13 的 K8S 集群&#xff08;其他版本也没问题&#xff09;&#xff1a; 角色IPMaster192.168.6.220Node-1192.168.6.221Node-2192.168.6.…
阅读更多...
React 学习——Class类组件的基本结构

React 学习——Class类组件的基本结构

老版本的react的写法&#xff1a;是通过class类组件的 import { Component } from react; class Counter extends Component{state {count: 0,}setCount ()>{this.setState({ count: this.state.count 1 })}render(){return <button onClick{this.setCount}>{thi…
阅读更多...
【Qt】输入类控件QLineEdit

【Qt】输入类控件QLineEdit

目录 输入类控件QLineEdit 例子&#xff1a;录入个人信息 例子&#xff1a;使用正则表达式验证输入框的数据 例子&#xff1a;验证俩次输入密码一致 例子&#xff1a;切换显示代码 输入类控件QLineEdit QLineEdit 用来表示单行输入框&#xff0c;可以输入一段文本&#xf…
阅读更多...
Go 文件操作基本方法大全

Go 文件操作基本方法大全

前言 在Go语言中&#xff0c;操作文件主要依赖于标准库中的os和io/ioutil&#xff08;注意&#xff1a;io/ioutil在Go 1.16及以后版本中被逐步弃用&#xff0c;推荐使用io和os包中的函数进行替代&#xff09;以及io和bufio等包。以下是一些基于这些基本库操作文件的方法大全&a…
阅读更多...
Python和MATLAB谐波生成导图

Python和MATLAB谐波生成导图

&#x1f3af;要点 绘制三次谐波生成透射功率谱、对数对数图表示半导体曲面二次谐波生成&#xff0c;分析判断材料特性谐波均值估计计算边际似然&#xff08;贝叶斯统计&#xff09;二次谐波散射分析胶体染料分子结构交流电谐波波形傅立叶分析分析旋转各向异性谐波高次谐波非线…
阅读更多...
appium下载及安装

appium下载及安装

下载地址&#xff1a;https://github.com/appium/appium-desktop/releases 双击安装就可以
阅读更多...
深入学习SQL优化的第三天

深入学习SQL优化的第三天

目录 聚合函数 排序和分组 聚合函数 1251. 平均售价 表&#xff1a;Prices------------------------ | Column Name | Type | ------------------------ | product_id | int | | start_date | date | | end_date | date | | price | int …
阅读更多...
桌球厅助教陪练系统源码开发和行业市场分析

桌球厅助教陪练系统源码开发和行业市场分析

台球助教陪练系统&#xff1a;引领智能化运动体验 作为一款专为台球爱好者设计的智能陪练系统&#xff0c;我们的目标是通过技术创新&#xff0c;让每位用户都能享受到个性化、高效的学习体验。无论是初学者还是寻求突破的高手&#xff0c;都能在我们的平台上找到适合自己的陪…
阅读更多...
基于YOLO V8的PCB缺陷检测识别系统（python源码+Pyqt5界面+数据集+训练代码）

基于YOLO V8的PCB缺陷检测识别系统（python源码+Pyqt5界面+数据集+训练代码）

数据集准备&#xff1a;收集并标注PCB缺陷的图像。模型训练&#xff1a;使用YOLO v8框架训练一个模型来识别这些缺陷。GUI开发&#xff1a;利用PyQt5创建一个用户友好的图形界面。模型部署&#xff1a;在GUI中集成训练好的模型&#xff0c;使用户能够上传PCB图像并得到缺陷检测…
阅读更多...
IOS 11 通用Base控制器封装

IOS 11 通用Base控制器封装

整体规划 BaseController&#xff1a;把viewDidLoad逻辑拆分为三个方法&#xff0c;方便管理。 BaseCommonController&#xff1a;不同项目可以复用的逻辑&#xff0c;例如&#xff1a;设置背景颜色方法等 BaseLogicController&#xff1a;本项目的通用逻辑&#xff0c;主要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023