CN116521629A - 文件可视化方法、装置及设备 - Google Patents
文件可视化方法、装置及设备 Download PDFInfo
- Publication number
- CN116521629A CN116521629A CN202310528025.8A CN202310528025A CN116521629A CN 116521629 A CN116521629 A CN 116521629A CN 202310528025 A CN202310528025 A CN 202310528025A CN 116521629 A CN116521629 A CN 116521629A
- Authority
- CN
- China
- Prior art keywords
- visualization
- dom
- target
- file
- visual
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000007794 visualization technique Methods 0.000 title claims abstract description 12
- 230000000007 visual effect Effects 0.000 claims abstract description 130
- 238000012800 visualization Methods 0.000 claims abstract description 121
- 239000012634 fragment Substances 0.000 claims abstract description 73
- 238000000034 method Methods 0.000 claims abstract description 41
- 238000009877 rendering Methods 0.000 claims abstract description 15
- 238000013079 data visualisation Methods 0.000 claims abstract description 11
- 238000005096 rolling process Methods 0.000 claims description 34
- 230000004044 response Effects 0.000 claims description 8
- 238000009825 accumulation Methods 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 4
- 230000008569 process Effects 0.000 abstract description 16
- 238000004891 communication Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000010420 art technique Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000002035 prolonged effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/16—File or folder operations, e.g. details of user interfaces specifically adapted to file systems
- G06F16/168—Details of user interfaces specifically adapted to file systems, e.g. browsing and visualisation, 2d or 3d GUIs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/17—Details of further file system functions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
本申请公开了一种文件可视化方法、装置及设备，该方法根据当前DOM节点高度，及，窗口的可视区域高度和滚动高度，计算可视化起始位置及可视化结束位置；确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点；若同时存在，则将虚拟列表中可视化起始位置以及可视化结束位置之间所有DOM节点渲染显示于窗口，实现目标数据可视化；若不同时存在，则请求目标文件的文件分片；利用文件分片更新虚拟列表，重复确定虚拟列表的过程，直至完成可视化起始位置以及可视化结束位置之间所有DOM节点的渲染显示。可见，本申请可以综合按需加载的方式以及虚拟列表，压缩预览目标文件过程中的等待时间，提高文档显示的效率。
Description
技术领域
本申请涉及数据处理技术领域，更具体地说，涉及一种文件可视化方法、装置及设备。
背景技术
无纸化办公已经应用到各行各业中。由于查看文档为无纸化办公的重要方式之一，因而，查看文档成为各行各业工作人员的办公日常。
在办公过程中，工作人员可以使用客户端的浏览器在线预览文档。但现有技术在对文档渲染显示前，需要完成整个文档的下载。一旦文件过大，加载时间随之增长，导致工作人员等待时间过长，且现有技术在渲染显示过大文档的过程中，产生的大量DOM节点，其中，DOM是Document Object Model文档对象模型的缩写，DOM节点可以动态地修改XML和HTML，过量的DOM节点会影响客户端的性能，导致客户端运行卡顿甚至崩溃，进一步延长工作人员的等待时间，导致工作人员工作效率较低。
发明内容
有鉴于此，本申请提供了一种文件可视化方法、装置及设备，用于解决现有技术中过量的DOM节点会影响客户端的性能，导致客户端运行卡顿甚至崩溃的缺点。
为了实现上述目的，现提出的方案如下：
一种文件可视化方法，包括：
响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；
根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；
确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；
若同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；
若不同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；
利用所述文件分片更新所述虚拟列表；
返回执行确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点的步骤，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止。
可选的，获取当前DOM节点高度，包括：
监听目标文件中每页对应的DOM节点高度；
将各个DOM节点高度与各页之间的对应关系存入数组；
按照位置顺序逐步叠加各个DOM节点高度直至累加的DOM节点高度等于所述窗口的滚动高度；
选取最后一个参与累加的DOM节点高度作为当前DOM节点高度。
可选的，根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置，包括：
将所述窗口的滚动高度与所述当前DOM节点高度之间的第一比值作为可视化起始位置；
计算所述窗口的可视区域高度与所述当前DOM节点高度之间的第二比值；
将所述可视化起始位置与所述第二比值之和作为所述可视化结束位置。
可选的，所述向服务器请求目标文件的文件分片，包括：
向所述服务器请求数据长度与预置的分片长度一致的、所述目标文件的文件分片；
接收并存储所述服务器返回的文件分片。
可选的，利用所述文件分片更新所述虚拟列表，包括：
生成所述文件分片中各个位置对应的DOM节点；
比较所述虚拟列表与所述文件分片的各个DOM节点，确定虚拟列表的多个缺失节点；
将每个缺失节点及其在目标文件中的位置添加于所述虚拟列表。
可选的，还包括：
获取所述窗口的上内边距及下内边距；
根据所述上内边距确定目标起始位置；
根据所述下内边距确定目标结束位置；
判断虚拟列表中是否存在目标起始位置对应的DOM节点以及是否存在目标结束位置对应的DOM节点；
若不存在目标起始位置对应的DOM节点，和/或，目标结束位置对应的DOM节点，则返回执行向服务器请求目标文件的文件分片，以获取目标文件的部分数据的步骤，以实现将目标起始位置对应的DOM节点以及目标结束位置对应的DOM节点之间所有DOM节点存储于虚拟列表。
可选的，根据所述上内边距确定目标起始位置，包括：
将可视化起始位置与所述上内边距之间的差值作为目标起始位置。
可选的，根据所述下内边距确定目标结束位置，包括：
将可视化结束位置与所述下内边距之和作为目标结束位置。
一种文件可视化装置，包括：
响应单元，用于响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；
计算单元，用于根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；
确定单元，用于确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；
渲染单元，用于若确定单元确认虚拟列表同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；
请求单元，用于若确定单元确认虚拟列表不存在可视化起始位置对应的DOM节点，和/或，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；
利用单元，用于利用所述文件分片更新所述虚拟列表，并返回调用确定单元及后续单元，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止。
一种文件可视化设备，包括存储器和处理器；
所述存储器，用于存储程序；
所述处理器，用于执行所述程序，实现上述的文件可视化方法的各个步骤。
一种可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现上述的文件可视化方法的各个步骤。
从上述的技术方案可以看出，本申请提供的文件可视化方法，可以响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；若同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；如此，本申请可以渲染显示虚拟列表中可视化起始位置至可视化结束位置之间的DOM节点，避免产生大量的DOM节点，造成卡顿。若不同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；利用所述文件分片更新所述虚拟列表；返回执行确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点的步骤，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止；如此，本申请可以按需截取文件资源，并按照截取的文件资源更新虚拟列表，减少用户等待时间及白屏时间。可见，本申请可以综合按需加载的方式以及虚拟列表，压缩预览目标文件过程中的等待时间，提高文档显示的效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本申请实施例公开的一种文件可视化方法流程图；
图2为本申请实施例提供的一种位置关系示意图；
图3为本申请实施例公开的一种文件可视化装置结构框图；
图4为本申请实施例公开的一种文件可视化设备的硬件结构框图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本发明可用于众多通用或专用的计算装置环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器装置、包括以上任何装置或设备的分布式计算环境等等。
本申请实施例提供一种文件可视化方法，该方法可以应用于各种计算机终端或是智能终端中，其执行主体可以为计算机终端或是智能终端的处理器或服务器，该方法的方法流程图如图1所示，具体包括：
步骤S1、响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度。
具体地，可以在监听到用户下发的窗口滚动指令后，获取高度不定的当前DOM节点高度，同时，获取窗口的可视化区域高度以及滚动高度。
当前DOM节点高度为当前渲染显示的DOM节点的高度。
DOM(Document Object Model，文档对象模型)，DOM可动态地修改XML和HTML。
步骤S2、根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置。
具体地，可以根据当前DOM节点高度及窗口的滚动高度，计算可视化起始位置。
可以根据当前DOM节点高度、可视化起始位置及窗口的可视区域高度，计算可视化结束位置。
步骤S3、确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点，若同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则执行步骤S4，若可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点不同时存在于虚拟列表中，则执行步骤S5。
具体地，可以确定可视化起始位置以及可视化结束位置在虚拟列表中是否皆存在对应的DOM节点，得到确定结果。
可以在确定结果表明虚拟列表中同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点时，执行步骤S4及其后续步骤。
可以在确定结果表明虚拟列表中不存在可视化起始位置对应的DOM节点，和/或，可视化结束位置对应的DOM节点时，执行步骤S5及其后续步骤。
步骤S4、将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化。
具体地，在虚拟列表中可以同时查找到可视化起始位置对应的DOM节点和可视化结束位置对应的DOM节点时，可以确定当前的虚拟列表能够满足用户的预览需求，此时，可以在窗口的可视区域中，渲染显示虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点。
步骤S5、向服务器请求目标文件的文件分片，以获取目标文件的部分数据。
具体地，若不存在可视化起始位置对应的DOM节点，和/或，可视化结束位置对应的DOM节点，则可以确定虚拟列表需要更新。
可以通过请求文件分片，进一步向服务器请求目标文件的部分数据。
步骤S6、利用所述文件分片更新所述虚拟列表，返回执行步骤S3。
具体地，可以利用服务器最新下发的文件分片更新虚拟列表，更新完成后，返回执行步骤S3及其后续步骤，以确定虚拟列表是否仍需要更新，直至虚拟列表符合用户的当前需求为止。
从上述的技术方案可以看出，本申请提供的文件可视化方法，可以响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；若同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；如此，本申请可以渲染显示虚拟列表中可视化起始位置至可视化结束位置之间的DOM节点，避免产生大量的DOM节点，造成卡顿。若不同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；利用所述文件分片更新所述虚拟列表；返回执行确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点的步骤，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止；如此，本申请可以按需截取文件资源，并按照截取的文件资源更新虚拟列表，减少用户等待时间及白屏时间。可见，本申请可以综合按需加载的方式以及虚拟列表，压缩预览目标文件过程中的等待时间，提高文档显示的效率。
在本申请的一些实施例中，对步骤S1中获取当前DOM节点高度的过程进行详细说明，步骤如下：
S10、监听目标文件中每页对应的DOM节点高度。
具体地，可以确定存储的目标文件的各个文件分片中每页对应的DOM节点高度。
S11、将各个DOM节点高度与各页之间的对应关系存入数组。
具体地，可以将各个DOM节点高度与各页的对应关系写入数组中。
S12、按照位置顺序逐步叠加各个DOM节点高度直至累加的DOM节点高度等于所述窗口的滚动高度。
具体地，可以按照各个DOM节点高度对应的各页的位置顺序对各个DOM节点高度进行逐步叠加，得到叠加结果。
判断叠加结果是否等于窗口的滚动高度，一旦等于窗口的滚动高度，则停止叠加。
S13、选取最后一个参与累加的DOM节点高度作为当前DOM节点高度。
具体地，可以将最后一个参与累加的DOM节点高度作为当前DOM节点高度。
从上述技术方案可以看出，本实施例提供了一种通过累加对比确定当前DOM节点高度的可选的方案，通过上述的方案可以通过与滚动高度对比，准确地确定当前DOM节点高度，从而，提高本申请确定可视化起始位置及可视化结束位置的可靠性，减少白屏产生的可能性。
在本申请的一些实施例中，对步骤S2、根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置的过程进行详细说明，步骤如下：
S20、将所述窗口的滚动高度与所述当前DOM节点高度之间的第一比值作为可视化起始位置。
具体地，可以计算窗口的滚动高度与当前DOM节点高度之间的比值，将该比值作为第一比值，该第一比值即为可视化起始位置。
S21、计算所述窗口的可视区域高度与所述当前DOM节点高度之间的第二比值。
具体地，可以计算窗口的可视区域高度与当前DOM节点高度之间的比值，并将该比值作为第二比值。
S22、将所述可视化起始位置与所述第二比值之和作为所述可视化结束位置。
具体地，可以将可视化起始位置与第二比值相加，将得到的相加结果作为可视化结束位置。
从上述技术方案可以看出，本实施例提供了一种计算可视化起始位置以及可视化结束位置的可选的方式。通过上述的方式，可以利用滚动高度以及DOM节点高度计算可视化起始位置，并利用计算得到可视化起始位置、DOM节点高度及可视区域高度，计算可视化结束位置。可见，本实施例可以利用窗口滚动高度、当前DOM节点高度与可视区域高度之间的关系，准确地计算可视化起始位置及可视化结束位置，进一步减少了可视化区域白屏的可能性，进一步提高用户体验。
在本申请的一些实施例中，对步骤S5、向服务器请求目标文件的文件分片，以获取目标文件的部分数据的过程进行详细说明，步骤如下：
S50、向所述服务器请求数据长度与预置的分片长度一致的、所述目标文件的文件分片。
具体地，在首次向服务器请求目标文件的文件分片时，可以向服务器请求目标文件的总数据量。
在确定目标文件的总数据量后，可以向服务器请求目标文件的、与分片长度一致的文件分片，分片长度表明请求的、从目标文件中截取的文件分片的数据总量。
分片长度可以根据实际需求进行设置，也可以根据目标文件的总数据量进行设置。
S51、接收并存储所述服务器返回的文件分片。
具体地，可以接收服务器返回的目标文件的文件分片。
可以确定在接收该文件分片前，本地所存储所接收到的目标文件对应的多个文件分片，按照各个文件分片在目标文件的顺序，对各个文件分片进行存储。
将存储的各个文件分片的数据总量之和与目标文件的总数据量进行比对，在二者数值相等时，停止向服务器请求目标文件的文件分片。
从上述技术方案可以看出，本实施例提供了一种请求文件分片的可选的方式，通过上述的方式，可以按需获取目标文件的部分资源，不需要一次性获取目标文件的所有数据，减少了首次获取目标文件数据的时间，提高了用户预览目标文件的效率。
在本申请的一些实施例中，对步骤S6、利用所述文件分片更新所述虚拟列表的过程进行详细说明，步骤如下：
S60、生成所述文件分片中各个位置对应的DOM节点。
具体地，可以生成文件分片中每个位置对应的所有DOM节点。
S61、比较所述虚拟列表与所述文件分片的各个DOM节点，确定虚拟列表的多个缺失节点。
具体地，可以将虚拟列表中的DOM节点与文件分片对应的所有DOM节点进行比较，缺失节点为对应于文件分片但并未添加在虚拟列表中的DOM节点。
S62、将每个缺失节点及其在目标文件中的位置添加于所述虚拟列表。
具体地，可以按照位置的先后顺序，将每个缺失节点及其在目标文件中的位置添加于虚拟列表中。
从上述技术方案可以看出，本实施例提供了一种更新虚拟列表的方式，通过上述的方式，本申请可以按需更新虚拟列表，并利用更新后的虚拟列表对目标文件需要显示在可视区域中的目标数据进行渲染显示，进一步提高了本申请的可靠性。
在本申请的一些实施例中，考虑到可以在虚拟列表中增加上内边距以及下内边距的DOM节点，以减少滚动白屏。接下来，将对增加上内边距以及下内边距的DOM节点的过程进行详细说明，步骤如下：
S7、获取所述窗口的上内边距及下内边距。
具体地，可以采集窗口的上内边距及下内边距。
S8、根据所述上内边距确定目标起始位置。
具体地，可以依据上内边距确定目标起始位置，目标起始位置对应于目标文件中的位置。
S9、根据所述下内边距确定目标结束位置。
具体地，可以依据上内边距确定目标结束位置，目标结束位置对应于目标文件中的位置。
目标起始位置与目标结束位置所确定的数据量大于可视化起始位置与可视化结束区域所确定的数据量，如图2所示。
可视化起始位置与可视化结束区域所确定的数据可为需要渲染显示在可视区域中的数据。
目标起始位置与目标结束位置所确定的数据可为未来的窗口滚动指令下发后，可能渲染显示于可视区域中的数据。
S10、判断虚拟列表中是否存在目标起始位置对应的DOM节点以及是否存在目标结束位置对应的DOM节点，若不存在目标起始位置对应的DOM节点，和/或，目标结束位置对应的DOM节点，则返回执行步骤S5。
具体地，可以在确定虚拟列表中不存在目标起始位置对应的DOM节点，和/或，不存在目标结束位置对应的DOM节点，可以返回执行步骤S5，以实现将目标起始位置对应的DOM节点以及目标结束位置对应的DOM节点之间所有DOM节点存储于虚拟列表。
从上述技术方案可以看出，本实施例增加了一种利用窗口的上内边距及下内边距，确定目标起始位置及目标结束位置的可选的方式，通过上述的方式能够预测未来的窗口滚动指令下发后，可能渲染显示于可视区域中的数据，从而，能够减少可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点不同时存在于虚拟列表的可能性，从而进一步降低滚动白屏，提高用户的效率以及使用体验。
在本申请的一些实施例中，对步骤S8、根据所述上内边距确定目标起始位置的过程进行详细说明，步骤如下：
S80、将可视化起始位置与所述上内边距之间的差值作为目标起始位置。
具体地，可以计算可视化起始位置与所述上内边距之间的差值，并将该差值作为目标起始位置。
从上述技术方案可以看出，本实施例提供了一种计算目标起始位置的可选的方式，通过上述的方式能够更好地计算目标起始位置，从而更好地预测新的目标数据。
在本申请的一些实施例中，对步骤S9、根据所述下内边距确定目标结束位置的过程进行详细说明，步骤如下：
S90、将可视化结束位置与所述下内边距之和作为目标结束位置。
具体地，可以将下内边距与可视化结束位置相加，得到的相加结果即为目标结束位置。
从上述技术方案可以看出，本实施例提供了一种计算目标结束位置的可选的方式，通过上述的方式能够更好地利用下内边距计算目标结束位置，从而更好地预测新的目标数据。
接下来将结合图3对本申请提供的文件可视化装置进行详细说明，下文所提供的文件可视化装置可与上文提供的文件可视化方法相互参照。
参见图3，可以发现，文件可视化装置可以包括：
响应单元1，用于响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；
计算单元2，用于根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；
确定单元3，用于确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；
渲染单元4，用于若确定单元确认虚拟列表同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；
请求单元5，用于若确定单元确认虚拟列表不存在可视化起始位置对应的DOM节点，和/或，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；
利用单元6，用于利用所述文件分片更新所述虚拟列表，并返回调用确定单元及后续单元，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止。
可选的，响应单元可以包括：
第一响应子单元，用于监听目标文件中每页对应的DOM节点高度；
第二响应子单元，用于将各个DOM节点高度与各页之间的对应关系存入数组；
第三响应子单元，用于按照位置顺序逐步叠加各个DOM节点高度直至累加的DOM节点高度等于所述窗口的滚动高度；
第四响应子单元，用于选取最后一个参与累加的DOM节点高度作为当前DOM节点高度。
可选的，计算单元可以包括：
第一计算子单元，用于将所述窗口的滚动高度与所述当前DOM节点高度之间的第一比值作为可视化起始位置；
第二计算子单元，用于计算所述窗口的可视区域高度与所述当前DOM节点高度之间的第二比值；
第二计算子单元，用于将所述可视化起始位置与所述第二比值之和作为所述可视化结束位置。
可选的，请求单元可以包括：
第一请求子单元，用于向所述服务器请求数据长度与预置的分片长度一致的、所述目标文件的文件分片；
第二请求子单元，用于接收并存储所述服务器返回的文件分片。
可选的，利用单元可以包括：
第一利用子单元，用于生成所述文件分片中各个位置对应的DOM节点；
第二利用子单元，用于比较所述虚拟列表与所述文件分片的各个DOM节点，确定虚拟列表的多个缺失节点；
第三利用子单元，用于将每个缺失节点及其在目标文件中的位置添加于所述虚拟列表。
可选的，文件可视化装置还可以包括：
边距获取单元，用于获取所述窗口的上内边距及下内边距；
目标起始位置确定单元，用于根据所述上内边距确定目标起始位置；
目标结束位置确定单元，用于根据所述下内边距确定目标结束位置；
节点比较单元，用于判断虚拟列表中是否存在目标起始位置对应的DOM节点以及是否存在目标结束位置对应的DOM节点，若不存在目标起始位置对应的DOM节点，和/或，目标结束位置对应的DOM节点，则返回调用请求单元及其后续单元，以实现将目标起始位置对应的DOM节点以及目标结束位置对应的DOM节点之间所有DOM节点存储于虚拟列表。
可选的，目标起始位置确定单元可以包括：
第一目标起始位置确定子单元，用于将可视化起始位置与所述上内边距之间的差值作为目标起始位置。
可选的，目标结束位置确定单元可以包括：
第一目标结束位置确定子单元，用于将可视化结束位置与所述下内边距之和作为目标结束位置。
本申请实施例提供的可应用于文件可视化设备，如PC终端、移动终端等。可选的，图4示出了设备的硬件结构框图，参照图4，设备的硬件结构可以包括：至少一个处理器1，至少一个通信接口2，至少一个存储器3和至少一个通信总线4；
在本申请实施例中，处理器1、通信接口2、存储器3、通信总线4的数量为至少一个，且处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信；
处理器1可能是一个中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路等；
存储器3可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)等，例如至少一个磁盘存储器；
其中，存储器存储有程序，处理器可调用存储器存储的程序，所述程序用于：
响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；
根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；
确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；
若同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；
若不同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；
利用所述文件分片更新所述虚拟列表；
返回执行确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点的步骤，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止。
可选地，所述程序的细化功能和扩展功能可参照上文描述。
本申请实施例还提供一种可读存储介质，该可读存储介质可存储有适于处理器执行的程序，所述程序用于：
响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；
根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；
确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；
若同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；
若不同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；
利用所述文件分片更新所述虚拟列表；
返回执行确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点的步骤，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止。
可选地，所述程序的细化功能和扩展功能可参照上文描述。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。本申请的各个实施例之间可以相互结合。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
Claims (10)
1.一种文件可视化方法，其特征在于，包括：
响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；
根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；
确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；
若同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；
若不同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；
利用所述文件分片更新所述虚拟列表；
返回执行确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点的步骤，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止。
2.根据权利要求1所述的文件可视化方法，其特征在于，所述获取当前DOM节点高度，包括：
监听目标文件中每页对应的DOM节点高度；
将各个DOM节点高度与各页之间的对应关系存入数组；
按照位置顺序逐步叠加各个DOM节点高度直至累加的DOM节点高度等于所述窗口的滚动高度；
选取最后一个参与累加的DOM节点高度作为当前DOM节点高度。
3.根据权利要求1所述的文件可视化方法，其特征在于，根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置，包括：
将所述窗口的滚动高度与所述当前DOM节点高度之间的第一比值作为可视化起始位置；
计算所述窗口的可视区域高度与所述当前DOM节点高度之间的第二比值；
将所述可视化起始位置与所述第二比值之和作为可视化结束位置。
4.根据权利要求1所述的文件可视化方法，其特征在于，所述向服务器请求目标文件的文件分片，包括：
向所述服务器请求数据长度与预置的分片长度一致的、所述目标文件的文件分片；
接收并存储所述服务器返回的文件分片。
5.根据权利要求1所述的文件可视化方法，其特征在于，利用所述文件分片更新所述虚拟列表，包括：
生成所述文件分片中各个位置对应的DOM节点；
比较所述虚拟列表与所述文件分片的各个DOM节点，确定虚拟列表的多个缺失节点；
将每个缺失节点及其在目标文件中的位置添加于所述虚拟列表。
6.根据权利要求1所述的文件可视化方法，其特征在于，还包括：
获取所述窗口的上内边距及下内边距；
根据所述上内边距确定目标起始位置；
根据所述下内边距确定目标结束位置；
判断虚拟列表中是否存在目标起始位置对应的DOM节点以及是否存在目标结束位置对应的DOM节点；
若不存在目标起始位置对应的DOM节点，和/或，目标结束位置对应的DOM节点，则返回执行向服务器请求目标文件的文件分片，以获取目标文件的部分数据的步骤，以实现将目标起始位置对应的DOM节点以及目标结束位置对应的DOM节点之间所有DOM节点存储于虚拟列表。
7.根据权利要求6所述的文件可视化方法，其特征在于，根据所述上内边距确定目标起始位置，包括：
将可视化起始位置与所述上内边距之间的差值作为目标起始位置。
8.根据权利要求6所述的文件可视化方法，其特征在于，根据所述下内边距确定目标结束位置，包括：
将可视化结束位置与所述下内边距之和作为目标结束位置。
9.一种文件可视化装置，其特征在于，包括：
响应单元，用于响应用户选择更新显示于窗口且来源于目标文件的可视化数据的操作，获取当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度；
计算单元，用于根据所述当前DOM节点高度，及，所述窗口的可视区域高度和滚动高度，计算目标数据于目标文件中的可视化起始位置及可视化结束位置；
确定单元，用于确定虚拟列表中是否存在可视化起始位置对应的DOM节点以及是否存在可视化结束位置对应的DOM节点；
渲染单元，用于若确定单元确认虚拟列表同时存在可视化起始位置对应的DOM节点，以及，可视化结束位置对应的DOM节点，则将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口，以实现目标数据可视化；
请求单元，用于若确定单元确认虚拟列表不存在可视化起始位置对应的DOM节点，和/或，可视化结束位置对应的DOM节点，则向服务器请求目标文件的文件分片，以获取目标文件的部分数据；
利用单元，用于利用所述文件分片更新所述虚拟列表，并返回调用确定单元及后续单元，直至将虚拟列表中可视化起始位置对应的DOM节点以及可视化结束位置对应的DOM节点之间所有DOM节点渲染显示于所述窗口为止。
10.一种文件可视化设备，其特征在于，包括存储器和处理器；
所述存储器，用于存储程序；
所述处理器，用于执行所述程序，实现如权利要求1-8中任一项所述的文件可视化方法的各个步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310528025.8A CN116521629A (zh) | 2023-05-10 | 2023-05-10 | 文件可视化方法、装置及设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310528025.8A CN116521629A (zh) | 2023-05-10 | 2023-05-10 | 文件可视化方法、装置及设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116521629A true CN116521629A (zh) | 2023-08-01 |
Family
ID=87397445
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310528025.8A Pending CN116521629A (zh) | 2023-05-10 | 2023-05-10 | 文件可视化方法、装置及设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116521629A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117648153A (zh) * | 2024-01-29 | 2024-03-05 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
| CN117648153B (zh) * | 2024-01-29 | 2024-04-26 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110134308A (zh) * | 2019-05-17 | 2019-08-16 | 深圳前海微众银行股份有限公司 | 数据展示方法、装置、设备及计算机可读存储介质 |
| CN112506509A (zh) * | 2020-12-11 | 2021-03-16 | 杭州安恒信息技术股份有限公司 | 一种实现树形控件支持大数据渲染的方法及相关装置 |
| CN113297313A (zh) * | 2021-06-07 | 2021-08-24 | 平安证券股份有限公司 | 表格数据展示方法、装置、电子设备及存储介质 |
| CN114117274A (zh) * | 2021-11-19 | 2022-03-01 | 深圳市绿联科技股份有限公司 | 一种数据渲染的方法、装置、计算机设备以及存储介质 |
| CN114611459A (zh) * | 2022-03-10 | 2022-06-10 | 平安普惠企业管理有限公司 | 文件在线预览方法、装置、计算机设备及存储介质 |
| CN115203603A (zh) * | 2022-06-29 | 2022-10-18 | 浙江中控技术股份有限公司 | 表格页面渲染方法、装置、电子装置和存储介质 |
| CN115686509A (zh) * | 2022-09-27 | 2023-02-03 | 中银金融科技有限公司 | 一种基于vue框架的树形结构数据渲染方法、装置和介质 |
| CN115793926A (zh) * | 2022-11-16 | 2023-03-14 | 深圳市亿图软件有限公司 | 列表的渲染方法、装置、电子设备及存储介质 |
-
2023
- 2023-05-10 CN CN202310528025.8A patent/CN116521629A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110134308A (zh) * | 2019-05-17 | 2019-08-16 | 深圳前海微众银行股份有限公司 | 数据展示方法、装置、设备及计算机可读存储介质 |
| CN112506509A (zh) * | 2020-12-11 | 2021-03-16 | 杭州安恒信息技术股份有限公司 | 一种实现树形控件支持大数据渲染的方法及相关装置 |
| CN113297313A (zh) * | 2021-06-07 | 2021-08-24 | 平安证券股份有限公司 | 表格数据展示方法、装置、电子设备及存储介质 |
| CN114117274A (zh) * | 2021-11-19 | 2022-03-01 | 深圳市绿联科技股份有限公司 | 一种数据渲染的方法、装置、计算机设备以及存储介质 |
| CN114611459A (zh) * | 2022-03-10 | 2022-06-10 | 平安普惠企业管理有限公司 | 文件在线预览方法、装置、计算机设备及存储介质 |
| CN115203603A (zh) * | 2022-06-29 | 2022-10-18 | 浙江中控技术股份有限公司 | 表格页面渲染方法、装置、电子装置和存储介质 |
| CN115686509A (zh) * | 2022-09-27 | 2023-02-03 | 中银金融科技有限公司 | 一种基于vue框架的树形结构数据渲染方法、装置和介质 |
| CN115793926A (zh) * | 2022-11-16 | 2023-03-14 | 深圳市亿图软件有限公司 | 列表的渲染方法、装置、电子设备及存储介质 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117648153A (zh) * | 2024-01-29 | 2024-03-05 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
| CN117648153B (zh) * | 2024-01-29 | 2024-04-26 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10482411B2 (en) | Dashboard for dynamic display of distributed transaction data | |
| WO2021068331A1 (zh) | 一种网页自适应布局方法、服务器及计算机可读存储介质 | |
| TWI325558B (en) | Program product and method for displaying a web page on a display screen | |
| CN112667330B (zh) | 一种页面显示方法及计算机设备 | |
| CN109388317B (zh) | 一种图片加载方法、终端设备及存储介质 | |
| CN112287258A (zh) | 页面渲染方法、装置、设备和存储介质 | |
| CN110362766B (zh) | 一种页面显示控制方法及终端 | |
| CN113986426B (zh) | 图像检测方法、装置、可读介质及电子设备 | |
| CN111125592B (zh) | 应用程序的热力图渲染方法及其装置 | |
| CN113886174A (zh) | 监控信息展示及处理方法、装置、计算机设备和存储介质 | |
| CN113204401A (zh) | 浏览器渲染方法，终端及存储介质 | |
| CN116521629A (zh) | 文件可视化方法、装置及设备 | |
| JP2013020395A (ja) | 情報処理装置、情報処理方法及びプログラム | |
| CN115878935B (zh) | 一种图表的局部刷新方法、系统、装置、设备及介质 | |
| CN114547495B (zh) | 一种页面加载方法、装置、设备及可读存储介质 | |
| US11134116B2 (en) | System and method for dynamically loading a webpage | |
| CN111143731A (zh) | 一种网页界面缩放时的显示方法、装置及终端设备 | |
| CN114117274A (zh) | 一种数据渲染的方法、装置、计算机设备以及存储介质 | |
| JP5682483B2 (ja) | 表示処理プログラム、表示処理方法、および情報処理装置 | |
| JP2017059067A (ja) | クライアント装置、および、データ表示プログラム | |
| JP2010033339A (ja) | サーバベース・コンピューティング・システムのサーバ装置、サーバ制御プログラム、および表示制御装置、表示制御プログラム | |
| CN110059281B (zh) | 图片显示方法、装置、终端及计算机可读存储介质 | |
| JP6520674B2 (ja) | 表示システム、表示端末、表示方法、および表示プログラム | |
| CN117389611A (zh) | 一种页面元素加载方法、装置、设备及存储介质 | |
| CN117194828B (zh) | React中Table滚动分页方法、装置及电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |