CN117591766B - 一种将网页转为可分页的pdf的方法 - Google Patents

Abstract

本发明公开了一种将网页转为可分页的pdf的方法，包括：调用浏览器API元素获取工具获取要生成PDF的页面容器DOM元素；计算页面容器的宽高和在页面中的位置信息；创建canvas画布对象，并将画布的宽度高度设置为容器的宽度和高度的两倍；在canvas画布上绘制页面容器，调整页面容器中元素的布局，用空白元素填充页面；导出为分页的pdf，获取插入填充的空白元素并通过浏览器Api移除工具删除所有空白元素，恢复原网页。本方案通过对网页中的内容提前进行处理后再转为分页的PDF，分页的PDF内容更加准确完整，并且可以根据需求动态调整生成的每页PDF的尺寸，可靠性和适应性更强。

Description

一种将网页转为可分页的pdf的方法

技术领域

本发明涉及网页转换技术领域，尤其涉及一种将网页转为可分页的pdf的方法。

背景技术

在许多WEB应用程序中，将网页内容转换为PDF文件，并且将PDF进行分页是一项常见的需求。

现有的网页转PDF方法在某些情况下会面临分页不准确的问题，在分页时出现内容被截断的情况，导致PDF生成结果不符合预期。比如：将一个有文字，柱状图等内容的网页转为PDF，会出现文字或者柱状图被截断，上半部分在第一页，下半部分在第二页，导致生成的PDF打印后不符合要求。

发明内容

本发明提出了一种将网页转为可分页的pdf的方法，通过对网页中的内容提前进行处理后再转为分页的PDF，具体技术方案如下。

一种将网页转为可分页的pdf的方法，包括以下步骤：

步骤S1：调用浏览器API元素获取工具获取要生成PDF的页面容器DOM元素；

步骤S2：计算页面容器的宽高和在页面中的位置信息；

步骤S3：创建canvas画布对象，并将画布的宽度高度设置为容器的宽度和高度的两倍；

步骤S4：在canvas画布上绘制页面容器，调整页面容器中元素的布局，用空白元素填充页面；

步骤S5：导出为分页的pdf，获取插入填充的空白元素并通过浏览器Api移除工具删除所有空白元素，恢复原网页。

进一步，所述步骤S2具体包括：通过浏览器API容器宽度和高度信息获取工具获取该容器的宽度和高度，通过浏览器API容器顶部和左端位置信息获取工具获取该容器到文档顶部和左边的距离。

进一步，所述步骤S4绘制页面容器具体包括：

使用 html2Canvas 转换脚本工具将html 网页页面渲染为 canvas画布；

获取输入的每页pdf宽度和高度参数；

获取canvas 画布的宽度，根据每页pdf高度和宽度参数和canvas 画布的宽度计算出每页展示的html网页内容的高度，并将这个高度定义为每页的标准高度。

进一步，所述步骤S4调整页面容器中元素的布局具体包括：

通过深度优先遍历算法，遍历容器中的每个子元素，通过子元素高度获取工具得到每个子元素的高度；

将子元素的高度和每页的标准高度做比较，若子元素的高度大于等于标准高度，继续递归遍历容器的子元素；若子元素的高度小于每页的标准高度，将子元素的高度进行累加。

进一步，所述步骤S4用空白元素填充页面具体包括：

将子元素高度每次累加后的和与每页的标准高度作比较，若和小于或者等于标准高度，则继续遍历；

若和大于标准高度，则计算出当页的标准高度与累加的和的差值再减去子元素的高度得到一个空白元素的高度值，通过浏览器API创建工具创建一个空白元素，将空白元素的高设置为得到的空白元素的高度值，将空白元素插入到子元素的前面。

进一步，所述步骤S5导出为分页的pdf具体包括：

调用浏览器API画布宽度和高度获取工具得到 canvas 画布的宽和高；

根据输入的每页pdf高度和宽度参数以及canvas 画布的宽度计算出将要导出的pdf的每页宽度和高度；

通过画布页面数据获取工具获取页面数据，进行分页计算，通过使用 JSpdf 工具将页面导出为分页的PDF文件。

本发明的有益效果：本发明提出了一种将网页转为可分页的pdf的方法，通过对网页中的内容提前进行处理后再转为分页的PDF，这样分页的PDF内容更加准确完整，并且可以根据需求动态调整生成的每页PDF的尺寸（按照A4，A3等纸张的尺寸进行调整）。对比传统方法，可靠性和适应性更强。

附图说明

图1是本发明一种将网页转为可分页的pdf的方法流程图。

具体实施方式

为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图说明本发明的具体实施方式。

本发明提出了一种将网页转为可分页的pdf的方法，其主要流程如图1所示，在本实施例中，包括以下步骤：

步骤S1：调用浏览器API元素获取工具获取要生成PDF的页面容器DOM元素；

步骤S2：计算页面容器的宽高和在页面中的位置信息；

步骤S3：创建canvas画布对象，并将画布的宽度高度设置为容器的宽度和高度的两倍；

步骤S4：在canvas画布上绘制页面容器，调整页面容器中元素的布局，用空白元素填充页面；

步骤S5：导出为分页的pdf，获取插入填充的空白元素并通过浏览器Api移除工具删除所有空白元素，恢复原网页。

在本实施例中 ，步骤S2具体通过浏览器API容器宽度和高度信息获取工具获取该容器的宽度和高度，通过浏览器API容器顶部和左端位置信息获取工具获取该容器到文档顶部和左边的距离。

在本实施例中，步骤S4绘制页面容器具体包括：

使用 html2Canvas 转换脚本工具将html 网页页面渲染为 canvas画布；

获取输入的每页pdf宽度和高度参数；

获取canvas 画布的宽度，根据每页pdf高度和宽度参数和canvas 画布的宽度计算出每页展示的html网页内容的高度，并将这个高度定义为每页的标准高度。

调整页面容器中元素的布局具体包括：

通过深度优先遍历算法，遍历容器中的每个子元素，通过子元素高度获取工具得到每个子元素的高度；

将子元素的高度和每页的标准高度做比较，若子元素的高度大于等于标准高度，继续递归遍历容器的子元素；若子元素的高度小于每页的标准高度，将子元素的高度进行累加。

用空白元素填充页面具体包括：

将子元素高度每次累加后的和与每页的标准高度作比较，若和小于或者等于标准高度，则继续遍历；

若和大于标准高度，则计算出当页的标准高度与累加的和的差值再减去子元素的高度得到一个空白元素的高度值，通过浏览器API创建工具创建一个空白元素，将空白元素的高设置为得到的空白元素的高度值，将空白元素插入到子元素的前面。

步骤S5导出为分页的pdf具体包括：

调用浏览器API画布宽度和高度获取工具得到 canvas 画布的宽和高；

根据输入的每页pdf高度和宽度参数以及canvas 画布的宽度计算出将要导出的pdf的每页宽度和高度；

通过画布页面数据获取工具获取页面数据，进行分页计算，通过使用 JSpdf 工具将页面导出为分页的PDF文件。

在一种实施例中，通过对网页中的内容提前进行处理后再转为分页的PDF，这样分页的PDF内容更加准确完整，并且可以根据需求动态调整生成的每页PDF的尺寸（按照A4，A3等纸张的尺寸进行调整），具体包括以下步骤：

1、获取要生成PDF的页面容器即DOM元素：

（1）通过调用浏览器API document.getElementById 获取容器元素。

2、计算该容器的宽高和在页面中的位置信息：

（1）通过浏览器API HTMLElement.offsetWidth 和HTMLElement.offsetHeight获取该容器的宽度和高度；

（2）通过浏览器API HTMLElement.offsetTop 和HTMLElement.offsetLeft 获取该容器到文档顶部和左边的距离。

3、创建画布：canvas 对象

（1）通过浏览器API document.createElement('canvas') 创建canvas 对象；

（2）将画布的宽度高度设置为容器的宽度和高度的两倍。

4、在 canvas画布上绘制页面容器，调整页面容器中元素的布局：

（1）使用 html2Canvas 将html 页面渲染为 canvas；

（2）获取输入的每页PDF宽度和高度参数；

（3）获取canvas 画布的宽度，根据每页PDF高度和宽度参数、canvas 画布的宽度计算出每页展示的html内容的高度，将这个高度定义为每页的标准高度。

（4）调整页面容器中的元素的布局：

通过深度优先遍历算法，遍历容器中的每个子元素，通过HTMLElement.offsetHeight拿到每个子元素的高度 childHeight，同时，将此childHeight 和每页的标准高度做比较，若 childHeight 大于等于标准高度，继续递归遍历此子元素的子元素；若 childHeight 小于每页的标准高度，将childHeight进行累加，每次累加后的和与每页的标准高度作比较，若和小于或者等于标准高度，则继续遍历；若和大于标准高度（说明当前子元素的内容在本页会显示不完，

有一部分会显示到下一页，那么这个子元素就会被截断），计算出当页的标准高度与累加的和的差值再减去子元素的高度得到一个空白元素的高度值whiteHeight，通过浏览器API document.createElement('div') 创建一个空白元素，将空白元素的高设置为whiteHeight，并且通过浏览器API insertBefore 将空白元素插入到子元素的前面（这样空白元素把此页的剩余空间占满，原本会被截断的子元素会在下一页进行渲染，避免了子元素被截断）。

5、通过第4步的处理，页面已经按照分页的尺寸调整好了页面容器中元素的布局，后续导出为分页的pdf时，不会出现内容被截断的情况。接下来再次使用 html2Canvas 将html 页面渲染为 canvas：

（1）调用浏览器API canvas.width 和 canvas.height 获取 canvas 画布的宽和高；

（2）根据输入的每页PDF高度和宽度参数、canvas 画布的宽度计算出将要导出的pdf的每页宽度和高度；

（3）通过 canvas.toDataURL() 获取页面数据；

（4）进行分页计算，通过使用 jspdf 工具将页面导出为分页的PDF文件。

6、导出PDF完成后，获取所有在第4步中插入的所有空白元素，通过浏览器APIremoveChild 删除所有空白元素，让网页恢复原样。

本发明以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。

Claims (3)

1.一种将网页转为可分页的pdf的方法，其特征在于，包括以下步骤：

步骤S1：调用浏览器API元素获取工具获取要生成PDF的页面容器DOM元素；

步骤S2：计算页面容器的宽高和在页面中的位置信息，具体包括：通过浏览器API容器宽度和高度信息获取工具获取该容器的宽度和高度，通过浏览器API容器顶部和左端位置信息获取工具获取该容器到文档顶部和左边的距离；

步骤S3：创建canvas画布对象，并将画布的宽度高度设置为容器的宽度和高度的两倍；

步骤S4：在canvas画布上绘制页面容器，调整页面容器中元素的布局，用空白元素填充页面，所述绘制页面容器具体包括：

使用 html2Canvas 转换脚本工具将html 网页页面渲染为 canvas画布；

获取输入的每页pdf宽度和高度参数；

获取canvas 画布的宽度，根据每页pdf高度和宽度参数和canvas 画布的宽度计算出每页展示的html网页内容的高度，并将这个高度定义为每页的标准高度；

所述调整页面容器中元素的布局具体包括：

通过深度优先遍历算法，遍历容器中的每个子元素，通过子元素高度获取工具得到每个子元素的高度；

将子元素的高度和每页的标准高度做比较，若子元素的高度大于等于标准高度，继续递归遍历容器的子元素；若子元素的高度小于每页的标准高度，将子元素的高度进行累加；

步骤S5：导出为分页的pdf，获取插入填充的空白元素并通过浏览器Api移除工具删除所有空白元素，恢复原网页。

2.根据权利要求1所述的一种将网页转为可分页的pdf的方法，其特征在于，所述步骤S4用空白元素填充页面具体包括：

将子元素高度每次累加后的和与每页的标准高度作比较，若和小于或者等于标准高度，则继续遍历；

若和大于标准高度，则计算出当页的标准高度与累加的和的差值再减去子元素的高度得到一个空白元素的高度值，通过浏览器API创建工具创建一个空白元素，将空白元素的高设置为得到的空白元素的高度值，将空白元素插入到子元素的前面。

3.根据权利要求1所述的一种将网页转为可分页的pdf的方法，其特征在于，所述步骤S5导出为分页的pdf具体包括：

调用浏览器API画布宽度和高度获取工具得到 canvas 画布的宽和高；

根据输入的每页pdf高度和宽度参数以及canvas 画布的宽度计算出将要导出的pdf的每页宽度和高度；

通过画布页面数据获取工具获取页面数据，进行分页计算，通过使用 JSpdf 工具将页面导出为分页的PDF文件。