基于canvas将前端页面转PDF及提高PDF清晰度的实现方法技术

本发明专利技术属于电子文档处理技术领域，具体涉及基于canvas将前端页面转pdf及提高pdf清晰度的实现方法。包括如下步骤：获取需要打印页面上某个指定区域；获取需要生成元素的宽高；步骤3：创建canvas，之后创建context对象；提供参数；将转换元素进行处理过后则调用内部html转换canvas的方法；计算pdf文件一页的页面高度；通过new JsPDF创建一个pdf元素，传入提供的pdfPosition控制pdf页面的方向；当完成所有pdf追加后，通过pdf.save存储pdf到本地。有益效果在于：通过前端canvas转换为pdf，当需要控制元素内部是否需要在pdf中呈现时，提供特定的参数来控制元素不在pdf中显示。

【技术实现步骤摘要】

本专利技术属于电子文档处理，具体涉及基于canvas将前端页面转pdf及提高pdf清晰度的实现方法。

技术介绍

1、在日常的表单网页操作中，经常会需要将在网页上操作的所有元素以实现所见即所得的方式将部分表单区域转换为pdf供我们打印，要想将整个网页转换为pdf当然可以使用浏览器的打印功能实现导出为pdf，但是浏览器的打印功能无法针对某一部分内容进行单独转为pdf。因此就诞生了一些新需求，比如只需要将网页中某一个表格转换为pdf而不是整个网页。

2、现有的开发方式中，将网页部分内容转换为pdf有两种方式：

3、一、前端通过一些三方插件来生成pdf；

4、二、后端java直接生成pdf。

5、当然后端生成是指在nodejs服务端通过chorme内核来生成pdf，这样会占用服务器资源。

6、在现阶段使用默认的pdf导出方式中，无法控制一些内部的元素是否需要在pdf中呈现，例如表格的分页控件、录入表格的操作按钮控件。无法导出隐藏区域的文字，例如多行文本中未显示的文字。无法设置导出的pdf中的页眉和页脚。无本文档来自技高网...

【技术保护点】

1.基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于，包括如下步骤：

2.如权利要求1所述的基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于：所述的步骤2中通过js语法：offset+指定区域获取，获取该元素距离顶部文档的距离和距离文档最左边的距离。

3.如权利要求1所述的基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于，所述的步骤5的实现过程如下：

4.如权利要求1所述的基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于，所述的步骤7中在将canva...

【技术特征摘要】

1.基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于，包括如下步骤：

2.如权利要求1所述的基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于：所述的步骤2中通过js语法：offset+指定区域获取，获取该元素距离顶部文档的距离和距离文档最左边的距离。

3.如权利要求1所述的基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于，所述的步骤5的实现过程如下：

4.如权利要求1所述的基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征在于，所述的步骤7中在将canvas导入pdf中时需要考虑pdf页面分页的问题，通过控制pdf高度以及页面还未生成的pdf高度进行判断处理，通过while循环未生成的pdf高度，只要未生成高度大于10，则会继续通过pdf.addpage新增一页，接着使用pdf.addimage追加当前高度的canvas元素到pdf中。

5.如权利要求1所述的基于canvas将前端页面转pdf及提高pdf清晰度的实现方法，其特征...

【专利技术属性】
技术研发人员：张啸天，谢飞，王景峰，
申请(专利权)人：中国中原对外工程有限公司，
类型：发明
国别省市：