CN110990345A

CN110990345A - 一种Excel文件在线预览的方法及装置

Info

Publication number: CN110990345A
Application number: CN201911189700.9A
Authority: CN
Inventors: 朱畅倩
Original assignee: Bank of China Ltd
Current assignee: Bank of China Ltd
Priority date: 2019-11-28
Filing date: 2019-11-28
Publication date: 2020-04-10

Abstract

本发明提供了一种Excel文件在线预览的方法及装置，包括：根据Excel文件预览请求从服务器获取待预览的Excel文件并对Excel文件进行解析；将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中；监测预先绘制于Html5文件中的电子表格选择区域的状态，并在状态变化时切换文件展示区域的的展示内容。本申请能够在保证用户数据和隐私安全的情况下，让用户在无需下载Excel文件的情况下，在网页中直接预览Excel表格并可在预览状态下完成表格切换等简易操作。

Description

一种Excel文件在线预览的方法及装置

技术领域

本申请属于互联网信息技术领域，具体地讲，涉及一种Excel文件在线预览的方法及装置。

背景技术

目前，在网页中想要实现Excel文件的预览，一般都需要网站与专业的第三方Office文件预览平台进行合作，否则就需要先将Excel文件下载至本地，然后再利用Office软件打开文件。但如果与其他第三方平台合作，对于银行业这种需要高度数据隐私的行业来说，极其不安全，但是如果选择将Excel文件下载至本地，则对用户而言体验感非常不好。

发明内容

本申请提供了一种Excel文件在线预览的方法及装置，以至少解决现有技术中，在线预览Excel文件需要与第三方平台合作或者需要先将Excel文件下载到本地的既不安全又不便捷的问题。

根据本申请的一个方面，提供了一种Excel文件在线预览的方法，包括：

根据Excel文件预览请求从服务器获取待预览的Excel文件并对Excel文件进行解析；

将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中；

监测预先绘制于Html5文件中的电子表格选择区域的状态，并在状态变化时切换文件展示区域的的展示内容。

在一实施例中，对Excel文件进行解析，包括：

对Excel文件进行转码；

通过js-xlsx读取转码后的Excel文件并将Excel文件中各电子表格的相关信息存储到对应的json对象中。

在一实施例中，还包括：

在Html5文件的页面中绘制文件展示区域和电子表格选择区域，并将Excel文件中各电子表格的名称展示在电子表格选择区域中。

在一实施例中，将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中，包括：

利用绘图渲染插件对Excel文件中的电子表格的内容进行渲染后展示在文件展示区域中；

将存储的Excel文件中各电子表格的名称遍历并展示在选择区域中。

在一实施例中，在状态变化时切换文件展示区域的页面，包括：

根据被选择的电子表格的名称切换对应的页面表格。

根据本发明的另一个方面，还提供了一种Excel文件在线预览的装置，包括：

获取及解析单元，用于根据Excel文件预览请求从服务器获取待预览的Excel文件并对Excel文件进行解析；

渲染单元，用于将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中；

监测单元，用于监测预先绘制于Html5文件中的电子表格选择区域的状态，并在状态变化时切换文件展示区域的的展示内容。

在一实施例中，获取及解析单元包括：

转码模块，用于对Excel文件进行转码；

JSON存储模块，用于通过js-xlsx读取转码后的Excel文件并将Excel文件中各电子表格的相关信息存储到对应的json对象中。

在一实施例中，还包括：

绘制单元，用于在Html5文件的页面中绘制文件展示区域和电子表格选择区域，并将Excel文件中各电子表格的名称展示在电子表格选择区域中。

在一实施例中，渲染单元包括：

插件渲染模块，用于利用绘图渲染插件对Excel文件中的电子表格的内容进行渲染后展示在文件展示区域中；

选择区域完善模块，用于将存储的Excel文件中各电子表格的名称遍历并展示在选择区域中。

在一实施例中，监测单元具体包括：

监听切换模块，用于根据被选择的电子表格的名称切换对应的页面表格。

通过本申请的Excel文件在线预览的方法及装置，通过自主编写的预览方法，解决了需要与外部平台合作以及连接外网的问题，同时也解决了资料外泄的问题，保障了数据的安全性和隐私性。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请提供的一种Excel文件在线预览的方法流程图。

图2为本申请实施例中页面的文件展示区和电子表格选择区的示意图。

图3为本申请实施例中对Excel文件进行解析的方法流程图。

图4为本申请实施例中将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中的方法流程图。

图5为本申请实施例中切换及重新渲染的效果示意图。

图6为本申请提供的一种Excel文件在线预览的装置结构框图。

图7为本申请实施例中获取及解析单元的结构框图。

图8为本申请实施例中渲染单元的结构框图。

图9为本申请实施例中的一种电子设备的具体实施方式。

具体实施方式

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

目前，用户在浏览网页时需要打开Excel文件实现在线预览，一般都需要该网站与专业的Office文件预览平台进行合作才能预览Excel文件，此方式对于银行业这种需要高度数据隐私性的行业来说极其不安全，但是，如果不与第三方平台合作，用户就无法实现在线预览文件，需要把文件下载到本地然后启动本地的office打开，这种方式耗时耗力，造成了非常不好的用户体验感。

基于上述问题，本申请提供了一种Excel文件在线预览的方法，如图1所示，该方法包括以下步骤：

S101：根据Excel文件预览请求从服务器获取待预览的Excel文件并对Excel文件进行解析。

在一具体实施例中，技术人员首先搭建Html5的运行环境。然后通过XMLHttpTequest(可扩展超文本传输请求)方法向提供Excel文件的服务器发出请求获取待预览的Excel文件，然后对Excel文件进行解析。

S102：将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中。

待预览的Excel文件解析后转换为js-xlsx可以识别的格式，然后利用预装在Html5文件中的渲染插件，将解析后的Excel文件渲染在用Html5前端语言制作成的页面(Html5文件)的文件展示区域中。

S103：监测预先绘制于Html5文件中的电子表格选择区域的状态，并在状态变化时切换文件展示区域的展示内容。

用Html5前端语言制作成的页面包括文件展示区域和电子表格选择区域，如图2所示，在文件展示区域中展示Excel文件中表格中的内容，在电子表格选择区域中罗列着该Excel文件所包含的所有sheet(电子表格)的名称。本方法通过监听电子表格选择区域的状态，在一具体实施例中，当电子表格选择区域中发生了click(点击)事件选中了某一sheet，文件展示区域中自动切换并展示该sheet所对应的表格的内容。

图1所示的方法的执行主体可以为服务器、PC、移动终端，该方法实现了通过自主编写和优化，使得Excel文件在页面中能够在线预览和建议排序筛选以及删除列的功能，让用户在无需下载文件且能够保证数据和隐私安全的情况下，在网页中直接预览Excel表格，并可在预览状态下完成排序、筛选等简单操作，弥补了现有银行业在网页文档预览方面的不足。

在一实施例中，如图3所示，对Excel文件进行解析，包括：

S301：对Excel文件进行转码。

对于本申请而言，关键点在于将获取的请求服务端的Excel文件内容转换成可以被识别的对象。

在一具体实施例中，可以将Excel文件内容转换成canvas-datagird插件(一种逐像素渲染插件)可以识别的json对象，如果要将Excel文件内容转换成canvas-datagird插件可以识别的json对象，包括以下步骤：将服务器的Excel文件转化成js-xlsx可以识别的格式和提取js-xlsx解析出的数据；获得canvas-datagird需要的表格展示的json对象。关于对Excel文件进行转码，首先通过可扩展超文本传输请求获得服务端的Excel文件，然后通过Uint8Array和fromCharCode方法对Excel文件进行转码。

S302：通过js-xlsx读取转码后的Excel文件并将Excel文件中各电子表格的相关信息存储到对应的json对象中。

在一具体实施例中，通过js-xlsx读取转码后的文件内容，并将文件内容中各个sheet的名字和内容存储到对应的json对象中。

在一实施例中，Excel文件在线预览的方法还包括：

在Html5文件的页面中绘制文件展示区域和电子表格选择区域，并将Excel文件中各电子表格的名称展示在电子表格选择区域中。编辑页面的文件展示区域与电子表格选择区域，将页面进行划分，实现了分区展示的效果。

在一具体实施例中，利用Html5前端语言搭建整体环境，在Html5文件的页面中绘制出文件展示区域和电子表格选择区域，在文件展示区域中展示Excel表格的具体内容，在电子表格选择区域中展示Excel表格中sheet的名称以供用户通过点击sheet来切换Excel文件中的不同表格。

在一实施例中，如图4所示，将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中，包括：

S401：利用绘图渲染插件对Excel文件中的电子表格的内容进行渲染后展示在文件展示区域中。

利用预装在Html5文件中的插件对Excel文件进行渲染。

S402：将存储的Excel文件中各电子表格的名称遍历并展示在选择区域中。

在一具体实施例中，利用canvas-datagrid插件对第一个sheet中的内容进行渲染并展示在页面的文件展示区域中，并将sheet的名称通过遍历以按钮的形式展示在电子表格选择区域中。

在一实施例中，在状态变化时切换文件展示区域的页面，可以通过根据被选择的电子表格的名称切换对应的页面表格实现。

在一具体实施例中，监听电子表格选择区域中发生的click时间，如果sheet1被点中，则文件展示区域切换原sheet1的内容并将sheet1中的内容重新渲染并展示。

下面将列举一些实际操作中的实施例来说明本申请的方案：

1、通过可扩展超文本传输请求从服务器获取Excel文件后对文件使用unit8array和fromCharCode方法对文件进行转码再通过js-xlsx读取转码后的文件内容并将各个sheet的名字和内容存储到对应的json对象中的具体实施例：

A.在html文件中绘制excel展示区域和Sheet选择区域：

<div id＝"grid"></div>/*excel表格展示区域*/

<div id＝"buttons"></div>/*Sheet选择区域*/

B.将存储的Sheet名称展示在Sheet选择区域，并监听Sheet选择区的click事件，从而实现切换不同的Sheet，表格中重新渲染并展示对应Sheet的表格数据：

C.利用canvas-datagrid插件对存储的第一个Sheet中的表格内容进行渲染并展示在页面的表格展示区域：

上述所获得的的实际展示效果如图5所示，将从服务器中获取的Excel文件以图5所示的方式展示给用户，实现了无需经由第三方平台合作或者下载到本地的方式来在线预览并进行简单编辑Excel文件的功能。

基于同一发明构思，本申请实施例还提供了一种Excel文件在线预览的装置，可以用于实现上述实施例中所描述的方法，如下面实施例所述。由于该Excel文件在线预览的装置解决问题的原理与Excel文件在线预览的方法相似，因此Excel文件在线预览的装置的实施可以参见Excel文件在线预览的方法的实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的系统较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

如图6所示，一种Excel文件在线预览的装置，包括：

获取及解析单元601，用于根据Excel文件预览请求从服务器获取待预览的Excel文件并对Excel文件进行解析；

渲染单元602，用于将解析后的Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中；

监测单元603，用于监测预先绘制于Html5文件中的电子表格选择区域的状态，并在状态变化时切换文件展示区域的的展示内容。

在一实施例中，如图7所示，获取及解析单元601包括：

转码模块701，用于对Excel文件进行转码；

JSON存储模块702，用于通过js-xlsx读取转码后的Excel文件并将Excel文件中各电子表格的相关信息存储到对应的json对象中。

在一实施例中，还包括：

在一实施例中，如图8所示，渲染单元602包括：

插件渲染模块801，用于利用绘图渲染插件对Excel文件中的电子表格的内容进行渲染后展示在文件展示区域中；

选择区域完善模块802，用于将存储的Excel文件中各电子表格的名称遍历并展示在选择区域中。

在一实施例中，监测单元603具体包括：

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

本申请的实施例还提供能够实现上述实施例中的方法中全部步骤的一种电子设备的具体实施方式，参见图9，所述电子设备具体包括如下内容：

处理器(processor)901、内存902、通信接口(Communications Interface)903、总线904和非易失性存储器905；

其中，所述处理器901、内存902、通信接口903通过所述总线904完成相互间的通信；

所述处理器901用于调用所述内存902和非易失性存储器905中的计算机程序，所述处理器执行所述计算机程序时实现上述实施例中的方法中的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

本申请的实施例还提供能够实现上述实施例中的方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于硬件+程序类实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。虽然本说明书实施例提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或终端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境，甚至为分布式数据处理环境)。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、产品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、产品或者设备所固有的要素。在没有更多限制的情况下，并不排除在包括所述要素的过程、方法、产品或者设备中还存在另外的相同或等同要素。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现，也可以将实现同一功能的模块由多个子模块或子单元的组合实现等。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

本领域技术人员应明白，本说明书的实施例可提供为方法、系统或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本说明书实施例的至少一个实施例或示例中。

在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。以上所述仅为本说明书实施例的实施例而已，并不用于限制本说明书实施例。对于本领域技术人员来说，本说明书实施例可以有各种更改和变化。凡在本说明书实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书实施例的权利要求范围之内。

Claims

1.一种Excel文件在线预览的方法，其特征在于，包括：

根据Excel文件预览请求从服务器获取待预览的Excel文件并对所述Excel文件进行解析；

将解析后的所述Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中；

监测预先绘制于Html5文件中的电子表格选择区域的状态，并在状态变化时切换所述文件展示区域的展示内容。

2.根据权利要求1所述的在线预览的方法，其特征在于，所述对所述Excel文件进行解析，包括：

对所述Excel文件进行转码；

通过js-xlsx读取转码后的所述Excel文件并将所述Excel文件中各电子表格的相关信息存储到对应的json对象中。

3.根据权利要求2所述的在线预览的方法，其特征在于，还包括：

在所述Html5文件的页面中绘制所述文件展示区域和所述电子表格选择区域，并将所述Excel文件中各电子表格的名称展示在所述电子表格选择区域中。

4.根据权利要求2所述的在线预览的方法，其特征在于，所述将解析后的所述Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中，包括：

利用绘图渲染插件对所述Excel文件中的电子表格的内容进行渲染后展示在所述文件展示区域中；

将存储的所述Excel文件中各电子表格的名称遍历并展示在所述选择区域中。

5.根据权利要求3所述的在线预览的方法，其特征在于，所述在状态变化时切换所述文件展示区域的页面，包括：

根据被选择的电子表格的名称切换对应的页面表格。

6.一种Excel文件在线预览的装置，其特征在于，包括：

获取及解析单元，用于根据Excel文件预览请求从服务器获取待预览的Excel文件并对所述Excel文件进行解析；

渲染单元，用于将解析后的所述Excel文件渲染后展示在预先绘制于Html5文件中的文件展示区域中；

监测单元，用于监测预先绘制于Html5文件中的电子表格选择区域的状态，并在状态变化时切换所述文件展示区域的的展示内容。

7.根据权利要求6所述的在线预览的装置，其特征在于，所述获取及解析单元包括：

转码模块，用于对所述Excel文件进行转码；

JSON存储模块，用于通过js-xlsx读取转码后的所述Excel文件并将所述Excel文件中各电子表格的相关信息存储到对应的json对象中。

8.根据权利要求7所述的在线预览的装置，其特征在于，还包括：

绘制单元，用于在所述Html5文件的页面中绘制所述文件展示区域和所述电子表格选择区域，并将所述Excel文件中各电子表格的名称展示在所述电子表格选择区域中。

9.根据权利要求7所述的在线预览的装置，其特征在于，所述渲染单元包括：

插件渲染模块，用于利用绘图渲染插件对所述Excel文件中的电子表格的内容进行渲染后展示在所述文件展示区域中；

选择区域完善模块，用于将存储的所述Excel文件中各电子表格的名称遍历并展示在所述选择区域中。

10.根据权利要求8所述的在线预览的装置，其特征在于，所述监测单元具体包括：

11.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至5中任一项所述Excel文件在线预览的方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至5中任一项所述Excel文件在线预览的方法。