web页面中的PDF显示方法及显示装置制造方法及图纸

本申请实施例提供一种web页面中的PDF显示方法及显示装置，涉及金融科技技术领域。该方法包括在web页面上分别使用html渲染方式和图片渲染方式渲染两个PDF；通过设置所述PDF的DOM元素，显示其中一个PDF，以对所述PDF进行显示或回放。该方法将html渲染方式和图片渲染方式并行，实现PDF的显示和回放，解决了rrweb框架下web页面中的PDF不可回放的问题。架下web页面中的PDF不可回放的问题。架下web页面中的PDF不可回放的问题。

【技术实现步骤摘要】
web页面中的PDF显示方法及显示装置


[0001]本申请涉及金融科技
，具体而言，涉及一种web页面中的PDF显示方法及显示装置。

技术介绍

[0002]互联网保险销售行为需要可回溯，保险机构通过销售页面管理和销售过程记录等方式，对在自营网络平台上销售保险产品的交易行为进行记录和保存，使其可供查验。
[0003]rrweb是一个实现web页面录制和回放的开源基础库，它可以将页面中的DOM以及用户操作行为(手指/鼠标上下滑动/点击/翻页/缩放)保存为可序列化的数据，以实现远程回放(也称用户操作行为可回溯)，但是rrweb目前不支持pdf回放，但是互联网保险销售时，用户查看的协议大部分都是通过pdf方式来实现的。

技术实现思路

[0004]本申请实施例的目的在于提供一种web页面中的PDF显示方法及显示装置，将html渲染方式和图片渲染方式并行，实现PDF的显示和回放，解决了rrweb框架下web页面中的PDF不可回放的问题。
[0005]本申请实施例提供了一种web页面中的PDF显示方法，所述方法包括：
[0006]在web页面上分别使用html渲染方式和图片渲染方式渲染两个PDF；
[0007]通过设置所述PDF的DOM元素，显示其中一个PDF，以对所述PDF进行显示或回放。
[0008]在上述实现过程中，使用并行的两种渲染方式对PDF进行渲染，html渲染方式保证了无障碍模式下屏幕阅读器的正常读取，图片渲染方式保证了rrweb采集的内容能够正常回放，解决了rrweb框架下web页面中的PDF不可回放的问题。
[0009]进一步地，所述在web页面上分别使用html渲染方式和图片渲染方式渲染两个PDF，包括：
[0010]在web页面上使用html渲染方式渲染上层的第一PDF；
[0011]使用图片渲染方式渲染下层的第二PDF。
[0012]在上述实现过程中，将上层的第一PDF使用html渲染方式渲染，下层使用图片渲染方式渲染，实现了使用并行的两种渲染方式对PDF进行渲染。
[0013]进一步地，所述通过设置所述PDF的DOM元素，显示其中一个PDF，以对所述PDF进行显示，包括：
[0014]设置所述第一PDF的DOM元素为在用户界面中显示，并发送渲染完成信号至第二PDF；
[0015]设置所述第二PDF的DOM元素为在用户界面中隐藏，并发送渲染完成信号至第一PDF。
[0016]在上述实现过程中，将上层的第一PDF的DOM元素设置为可见，下层设置为不可见，使得用户只能够看到上层的第一PDF，不会影响用户正常使用和显示。
[0017]进一步地，所述通过设置所述PDF的DOM元素，以显示其中一个PDF，以对所述PDF进行回放，包括：
[0018]在回放时，利用媒体查询技术设置所述第一PDF的样式为DOM元素不显示；
[0019]利用媒体查询技术设置所述第二PDF的样式为DOM元素显示。
[0020]在上述实现过程中，回放时，利用媒体查询技术更改设置，解决了两个PDF的显示和隐藏的切换问题。
[0021]进一步地，所述方法还包括：
[0022]在监听到所述第二PDF渲染完成后，在第一PDF注册滚动监听事件，以获取DOM元素的滚动距离；
[0023]将所述滚动距离发送至第二PDF，以将所述第二PDF的DOM元素滚动至对应位置。
[0024]在上述实现过程中，通过监听第一PDF的DOM元素的滚动，实现对第二PDF的DOM元素的同步。
[0025]本申请实施例还提供一种web页面中的PDF显示装置，所述装置包括：
[0026]渲染模块，用于在web页面上分别使用html渲染方式和图片渲染方式渲染两个PDF；
[0027]显示设置模块，用于通过设置所述PDF的DOM元素，以显示其中一个PDF，以对所述PDF进行显示或回放。
[0028]在上述实现过程中，使用并行的两种渲染方式对PDF进行渲染，html渲染方式保证了无障碍模式下屏幕阅读器的正常读取，图片渲染方式保证了rrweb采集的内容能够正常回放，解决了rrweb框架下web页面中的PDF不可回放的问题。
[0029]进一步地，所述渲染模块包括：
[0030]html渲染模块，用于在web页面上使用html渲染方式渲染上层的第一PDF；
[0031]图片渲染模块，用于使用图片渲染方式渲染下层的第二PDF。
[0032]在上述实现过程中，将上层的第一PDF使用html渲染方式渲染，下层使用图片渲染方式渲染，实现了使用并行的两种渲染方式对PDF进行渲染。
[0033]所述显示设置模块包括：
[0034]第一显示设置模块，用于设置所述第一PDF的DOM元素为在用户界面中显示，并发送渲染完成信号至第二PDF；
[0035]第二显示设置模块，用于设置所述第二PDF的DOM元素为在用户界面中隐藏，并发送渲染完成信号至第一PDF。
[0036]在上述实现过程中，将上层的第一PDF的DOM元素设置为可见，下层设置为不可见，使得用户只能够看到上层的第一PDF，不会影响用户正常使用和显示。
[0037]本申请实施例还提供一种电子设备，所述电子设备包括存储器以及处理器，所述存储器用于存储计算机程序，所述处理器运行计算机程序以使所述电子设备执行上述中任一项所述的web页面中的PDF显示方法。
[0038]本申请实施例还提供一种可读存储介质，所述可读存储介质中存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行上述中任一项所述的web页面中的PDF显示方法。
附图说明
[0039]为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0040]图1为本申请实施例提供的一种web页面中的PDF显示方法的流程图；
[0041]图2为本申请实施例提供的两种渲染方式示意图；
[0042]图3为本申请实施例提供的回放示意图；
[0043]图4为本申请实施例提供的web页面中的PDF显示方法的具体流程图；
[0044]图5为本申请实施例提供的PDF渲染流程图；
[0045]图6为本申请实施例提供的显示设置流程图；
[0046]图7为本申请实施例提供的回访时的显示设置流程图；
[0047]图8为本申请实施例提供的同步设置的流程图；
[0048]图9为本申请实施例提供的一种web页面中的PDF显示装置的结构框图；
[0049]图10为本申请实施例提供的另一种web页面中的PDF显示装置的结构框图。
[0050]图标：
...

【技术保护点】

【技术特征摘要】
1.一种web页面中的PDF显示方法，其特征在于，所述方法包括：在web页面上分别使用html渲染方式和图片渲染方式渲染两个PDF；通过设置所述PDF的DOM元素，显示其中一个PDF，以对所述PDF进行显示或回放。2.根据权利要求1所述的web页面中的PDF显示方法，其特征在于，所述在web页面上分别使用html渲染方式和图片渲染方式渲染两个PDF，包括：在web页面上使用html渲染方式渲染上层的第一PDF；使用图片渲染方式渲染下层的第二PDF。3.根据权利要求1所述的web页面中的PDF显示方法，其特征在于，所述通过设置所述PDF的DOM元素，显示其中一个PDF，以对所述PDF进行显示，包括：设置第一PDF的DOM元素为在用户界面中显示，并发送渲染完成信号至第二PDF；设置所述第二PDF的DOM元素为在用户界面中隐藏，并发送渲染完成信号至第一PDF。4.根据权利要求1所述的web页面中的PDF显示方法，其特征在于，所述通过设置所述PDF的DOM元素，以显示其中一个PDF，以对所述PDF进行回放，包括：在回放时，利用媒体查询技术设置第一PDF的样式为DOM元素不显示；利用媒体查询技术设置第二PDF的样式为DOM元素显示。5.根据权利要求1所述的web页面中的PDF显示方法，其特征在于，所述方法还包括：在监听到第二PDF渲染完成后，在第一PDF注册滚动监听事件，以获取DOM元素的滚动距离；将所述滚动...

【专利技术属性】
技术研发人员：周群辉，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：