具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本申请中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

由背景技术可知，由于项目内嵌的各个APP的底层框架不同，从而导致个别原生框架的PDF文件进行展示时出现空白现象，造成用户无法预览出PDF文件的内容，因此，现有预览PDF的方法造成用户体验差。

为了解决该问题，本申请实施例公开了一种PDF文件处理方法及系统，根据待预览PDF文件的页数创建画布容器，画布容器的数量与待预览PDF文件的页数一致，使得画布容器可存放待预览PDF文件，并通过预设页面将待预览PDF文件进行加载和展示，在兼容跨屏的同时又能保持PDF文件的输出，从而使得用户可以预览出PDF文件的内容，提高用户体验。具体实现方式通过下述实施例进行说明。

参考图1所示，为本申请实施例公开的一种PDF文件处理方法的流程示意图，该PDF文件处理方法主要包括如下步骤：

S101：获取待预览PDF文件的页数，并根据待预览PDF文件的页数创建画布容器canvas；画布容器canvas的数量与待预览PDF文件的页数一致。

在S101中，通过预设插件获取待预览PDF文件的页数N(总页数)，并根据待预览PDF文件的页数N创建相同数量的画布容器canvas。创建相同数量的画布容器canvas用于放待预览PDF文件。

其中，N的取值为大于等于1的整数。

预设插件可以是pdf.js插件，也可以是其他插件，本申请不做具体限定，本申请优选pdf.js插件。

画布容器canvas用于存放PDF转换过来的页面。

PDF是由Adobe Systems用于与应用程序、操作系统、硬件无关的方式进行文件交换所发展出的文件格式。PDF文件以PostScript语言图象模型为基础，无论在哪种打印机上都可保证精确的颜色和准确的打印效果，即PDF会再现原稿的每一个字符、颜色以及图象。

具体的，根据待预览PDF文件的页数创建画布容器canvas的过程如下：

首先，引入pdf.js插件，然后，通过numPages域获取待预览PDF文件的页数N，最后，根据页数N创建相同数量的画布容器canvas。

取待预览PDF文件的页数的代码如下：

S102：通过预定义元素，对画布容器canvas进行渲染。

在S102中，预定义元素为canvas元素。

创建canvas元素，并对canvas元素的窗口宽度进行定义(即定义待预览的PDF文件的宽度scaleW值)，通过预设宽高比例和定义后的窗口宽度，确定窗口高度，将定义后的canvas元素的窗口宽度和窗口高度对画布容器canvas进行渲染。

先定义待预览的PDF文件的宽度scaleW值，通过窗口宽度scaleW值进行高度自适应，即通过预设宽高比例和定义后的窗口宽度，确定窗口高度，确保待预览的PDF文件转换到画布容器canvas内的窗口宽度和窗口高度不被压缩。

其中，canvas元素包括元素ID、窗口宽度、窗口高度、context对象和虚拟窗口viewport等。

canvas元素使用JavaScript在网页上绘制图像，canvas元素拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

画布容器canvas是一个矩形区域，可以控制其每一像素。

在JavaScript编程语言内部中使用元素ID用于寻找canvas元素。

预设宽高比例由技术人员根据实际情况进行设置，本申请不做具体限定。

通过设置scaleW值来定义窗口宽度和窗口高度，并通过定义后的窗口宽度和窗口高度对画布容器canvas进行渲染。

创建canvas元素的代码如下：

对canvas元素进行定义的代码如下：

其中，getContext('2d')对象是内建的超文本5.0(HyperText Markup Language5，HTML5)对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

S103：将待预览PDF文件关联至渲染后的画布容器canvas中。

在S103中，定义canvas元素中的上下文变量和虚拟窗口变量，将canvas元素中的上下文变量context、虚拟窗口变量viewport和预设渲染函数，将待预览PDF文件关联至渲染后的画布容器canvas中。

其中，预设渲染函数可以是render函数，也可是其他函数，具体预设渲染函数的确定由技术人员根据实际情况进行设置，本申请不做具体限定，本申请预设渲染函数优选render函数。

具体将待预览PDF文件关联至渲染后的画布容器canvas中的过程如下：

首先，定义canvas元素中的context对象和虚拟窗口viewport，然后，通过上下文变量context、虚拟窗口变量viewport和render函数，将待预览PDF文件的页面关联至渲染后的画布容器canvas的上下文中。

通过render函数，将定义后的context和viewport赋值给待预览PDF文件的页面page。

将待预览PDF文件关联至渲染后的画布容器canvas中的代码如下：

S104：读取画布容器canvas中的待预览PDF文件，并将待预览PDF文件加载至预设页面中。

在S104中，通过预设读取插件，读取画布容器canvas中的待预览PDF文件，并将待预览PDF文件加载至预设页面中。

其中，预设读取插件可以是pdf.js插件，也可以是其他读取插件，本申请不做具体限定，本申请预设读取插件优选pdf.js插件。

预设页面可以是HTML5页面，也可以是其它页面等，预设页面的确定由技术人员根据实际情况进行设置，本申请不做具体限定，本申请预设页面优选HTML5页面。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。

HTML5是专门为承载丰富的全球广域网(World Wide Web，web)的内容而设计的，并且无需额外插件；拥有新的语义、图形以及多媒体元素；HTML5提供的新元素和新的API简化了web应用程序的搭建；HTML5是跨平台的，被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。

通过pdf.js插件，读取画布容器canvas中的待预览PDF文件，并将待预览PDF文件加载至HTML5页面中。在内嵌APP的H5项目中能够预览多页的PDF文件，满足用户需求及业务需求，提高用户体验。

读取画布容器canvas中的待预览PDF文件，并将待预览PDF文件加载至HTML5页面中的代码如下：

为了方便理解上述PDF文件处理方法的过程，这里举例进行说明：

例如，待预览PDF文件的总页数为10页，根据待预览PDF文件的总页数10创建画布容器canvas，画布容器canvas的数量为10，预设宽高比例设置为10:7。创建canvas元素，定义待预览的PDF文件的宽度scaleW值，即窗口宽度为10cm，基于预设宽高比例(10:7)和窗口宽度10cm进行高度自适应，得到窗口高度为7cm，通过窗口宽度10cm和窗口高度7cm，对画布容器canvas进行渲染，渲染后的画布容器canvas的宽度为10cm，高度为7cm，将10页待预览PDF文件关联至宽度为10cm，高度为7cm的画布容器canvas中，读取画布容器canvas中的待预览PDF文件，并将待预览PDF文件加载至HTML5页面中。

本申请实施例中，根据待预览PDF文件的页数创建画布容器canvas，画布容器canvas的数量与待预览PDF文件的页数一致，使得画布容器canvas可存放待预览PDF文件，并通过HTML5框架将待预览PDF文件进行加载和展示，在兼容跨屏的同时又能保持PDF文件的输出，从而使得用户可以预览出PDF文件的内容，提高用户体验。

参考图2所示，为上述S101中涉及到获取待预览PDF文件的页数，并根据待预览PDF文件的页数创建画布容器canvas的过程，主要包括如下步骤：

S201：通过预设插件，获取待预览PDF文件的页数。

在S201中，引入pdf.js插件，通过numPages方法获取待预览PDF文件的页数N。其中，N的取值为大于等于1的整数。

S202：根据待预览PDF文件的页数创建画布容器canvas。

在S202中，根据页数N创建相同数量的画布容器canvas。

本申请实施例中，通过预设插件，获取待预览PDF文件的页数，实现根据待预览PDF文件的页数创建画布容器canvas的目的。

参考图3所示，为上述S102中涉及到通过预定义元素，对画布容器canvas进行渲染的过程，主要包括如下步骤：

S301：定义窗口宽度。

S302：通过预设宽高比例和定义后的窗口宽度，确定窗口高度。

S303：通过定义后的窗口宽度和窗口高度，对画布容器canvas进行渲染。

S301-S303的执行原理与上述S102的执行原理一致，可参考，此处不再进行赘述。

本申请实施例中，通过预设宽高比例和定义后的窗口宽度，确定窗口高度，通过定义后的窗口宽度和窗口高度，实现对画布容器canvas进行渲染的目的。

参考图4所示，为上述S103中涉及到将待预览PDF文件关联至渲染后的画布容器canvas中的过程，主要包括如下步骤：

S401：定义canvas元素中的上下文变量context和虚拟窗口变量viewport。

S402：通过上下文变量context、虚拟窗口变量viewport和预设渲染函数，将待预览PDF文件的页面关联至渲染后的画布容器canvas的上下文中。

S401-S402的执行原理与上述S103的执行原理一致，可参考，此处不再进行赘述。

本申请实施例中，定义canvas元素中的上下文变量context和虚拟窗口变量viewport，通过上下文变量context、虚拟窗口变量viewport和预设渲染函数，实现将待预览PDF文件的页面关联至渲染后的画布容器canvas的上下文中的目的。

参考图5所示，为上述S104中涉及到读取画布容器中的待预览PDF文件，并将待预览PDF文件加载至预设页面中的过程，主要包括如下步骤：

S501：通过预设读取插件，读取画布容器canvas中的待预览PDF文件。

其中，预设读取插件可以是pdf.js插件，也可以是其他读取插件，本申请不做具体限定，本申请预设读取插件优选pdf.js插件。

S502：将待预览PDF文件加载至HTML5页面中。

其中，预设页面可以是HTML5页面，也可以是其它页面等，预设页面的确定由技术人员根据实际情况进行设置，本申请不做具体限定，本申请预设页面优选HTML5页面。

本申请实施例中，通过预设读取插件，读取画布容器canvas中的待预览PDF文件，将待预览PDF文件加载至HTML5页面中，通过HTML5框架将待预览PDF文件进行加载和展示，在兼容跨屏的同时又能保持PDF文件的输出，从而使得用户可以预览出PDF文件的内容，提高用户体验。

基于上述实施例图1公开的一种PDF文件处理方法，本申请实施例还对应公开了一种PDF文件处理系统，如图6所示。PDF文件处理系统主要包括获取单元601、渲染单元602、关联单元603和加载单元604。

获取单元601，用于获取待预览PDF文件的页数，并根据待预览PDF文件的页数创建画布容器canvas；画布容器canvas的数量与待预览PDF文件的页数一致。

其中，获取单元601通过预设插件获取待预览PDF文件的页数N(总页数)，并根据待预览PDF文件的页数N创建相同数量的画布容器canvas。创建相同数量的画布容器canvas用于放待预览PDF文件。

渲染单元602，用于通过预定义元素，对画布容器canvas进行渲染。

其中，渲染单元602创建canvas元素，并对canvas元素的窗口宽度进行定义(即定义待预览的PDF文件的宽度scaleW值)，通过预设宽高比例和定义后的窗口宽度，确定窗口高度，将定义后的canvas元素的窗口宽度和窗口高度对画布容器canvas进行渲染。

关联单元603，用于将待预览PDF文件关联至渲染后的画布容器canvas中。

其中，关联单元603将canvas元素中的上下文变量context、虚拟窗口变量viewport和预设渲染函数，将待预览PDF文件关联至渲染后的画布容器canvas中。

加载单元604，用于读取画布容器canvas中的待预览PDF文件，并将待预览PDF文件加载至预设页面中。

其中，加载单元604通过预设读取插件，读取画布容器canvas中的待预览PDF文件，并将待预览PDF文件加载至预设页面中。

进一步的，获取单元601包括获取模块和创建模块。

获取模块，用于通过预设插件，获取待预览PDF文件的页数。

创建模块，用于根据待预览PDF文件的页数创建画布容器canvas。

进一步的，渲染单元602包括第一定义模块、确定模块和渲染模块。

第一定义模块，用于定义窗口宽度。

确定模块，用于通过预设宽高比例和定义后的窗口宽度，确定窗口高度。

渲染模块，用于通过定义后的窗口宽度和窗口高度，对画布容器canvas进行渲染。

进一步的，关联单元603包括第二定义模块和关联模块。

第二定义模块，用于定义预设元素中的上下文变量context和虚拟窗口变量viewport。

关联模块，用于通过上下文context、虚拟窗口变量viewport和预设渲染函数，将待预览PDF文件的页面关联至渲染后的画布容器canvas的上下文中。

进一步的，加载单元604包括读取模块和加载模块。

读取模块，用于通过预设读取插件，读取画布容器canvas中的待预览PDF文件。

加载模块，用于将待预览PDF文件加载至HTML5页面中。

本申请实施例中，根据待预览PDF文件的页数创建画布容器canvas，画布容器canvas的数量与待预览PDF文件的页数一致，使得画布容器canvas可存放待预览PDF文件，并通过HTML5框架将待预览PDF文件进行加载和展示，在兼容跨屏的同时又能保持PDF文件的输出，从而使得用户可以预览出PDF文件的内容，提高用户体验。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于系统类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请各实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。