一种实现自定义web版excel的方法

摘要

本发明公开了一种实现自定义web版excel的方法，属于网页制作技术领域，该方法使用typescript进行开发，然后编译成js文件进行使用，其实现方式为：引入相关js文件；在页面定义表格容器标签，初始化excel脚本生成页面表格；通过web页面配置，加载出用于和Excel或其他电子表格软件兼容的基于web的交互式HTML表格和电子表格。本发明能够实现快速构建页面excel表格，并可以实现轻松编辑或打印；能够节约用户的时间，同时还可以减轻服务器处理大量数据的压力。

说明书

技术领域

本发明涉及网页制作技术领域，具体地说是一种实现自定义web版excel的方法。

背景技术

在如今大数据时代，谈到管理信息系统，人们很容易联想起国内外的一些ERP软件、财务软件、进销存软件、OA软件、CRM软件等等，这些软件系统管理信息时常使用Microsoft Excel来进行数据的维护与录入，然后通过导入、导出等功能，将数据维护到本系统内，再通过后台服务器对数据加工和转换从而展示在web页面上。

在目前的应用中，如果在大量的数据中，用户发现其中某一条数据录错了，用户只能重新下载下来改好再次导入到系统中，或者使用系统单独开发的编辑功能去处理这些错误的数据，这样不仅仅增加了用户的时间成本，而且会占用大量的服务器资源。

发明内容

本发明的技术任务是针对以上不足之处，提供一种实现自定义web版excel的方法，实现快速构建页面excel表格，并可以实现轻松编辑或打印，能够节约用户的时间，还可以减轻服务器处理大量数据的压力。

本发明解决其技术问题所采用的技术方案是：

一种实现自定义web版excel的方法，使用typescript进行开发，然后编译成js文件进行使用，其实现方式为：

引入相关js文件(js-excel.js)；

在页面定义表格容器标签，

初始化excel脚本生成页面表格；

通过web页面配置，加载出用于和Excel或其他电子表格软件兼容的基于web的交互式HTML表格和电子表格。

通过该方法，可以从JS数组，JSON，CSV或XSLX文件创建在线电子表格表格；可以从excel复制并直接粘贴到页面电子表格上，同样也可以从页面表格复制并粘贴到excel中。可以集成第三方JavaScript插件来创建用户自己的自定义列，自定义编辑器，以及将任何功能自定义到应用程序中，例如日期选择权、颜色选择器等。

Typescript可以提高代码的可读性，无疑能减少错误，或至少可以更快的捕获这些错误—即使是在编写或运行任何单元测试之前。本方法基于typescript开发web版自定义表格插件，包括表格数据加载、数据编辑、样式修改、粘贴复制等等，以达到页面数据展示的效果。

该方法解决excel在web页面上的编辑与查看问题，主要针对常用excel表格的财务系统、erp系统以及oa表单等。

优选的，初始化基础配置，对页面进行初始化，传过来的容器dom生成table框架，所述初始化根据传过来的配置，如果没有传过来则取默认设置。

优选的，初始化表格配置包括宽度、高度、class、id、样式和绑定的事件。

进一步的，对初始化好的table框架，添加thead标签，设置默认class及样式，添加3列默认的th，

对初始化的好的table框架，添加tbody标签，设置默认class及样式，添加3列默认的tr，

如果初始化表格时，未传入数据则直接展示默认配置；

如果传入数据，对传过来的数据json做处理，循环编辑每一条数据，根据type生成不同的列与行，生成时把之前默认生成的3行3列覆盖掉。

优选的，对于不同type的数据分别编写处理方法：

针对type为text的数据，直接展示及添加相应的input输入框，绑定编辑功能；对于type为date的数据，展示时首先格式化成时间类型再添加日历插件绑定编辑功能；对于type为color的直接展示为对应的颜色并添加颜色插件，绑定编辑功能。

进一步的，所述web页面配置还包括绑定鼠标事件和加载表格处理数据方法，鼠标事件包括选中事件、拖动、右键以及双击功能；

包括编写列拖动功能、行拖动功能，可拖动排序，编写列宽拖动改变功能，每个功能单独编写，并绑定到生成的thead上。

对每个字段包括双击编辑功能，添加鼠标右键点击功能，右键点击弹窗选择复制行、删除行、刷新、粘贴等功能；编写复制/粘贴功能，计算复制或粘贴起点坐标，利用鼠标拖动功能收集要复制或粘贴的数据，然后处理表格展示。

表格处理数据方法包括筛选、批量处理、批量计算以及内置计算方法等。

进一步的，引入jsPDF，并添加配置按钮，可以生成图片或pdf。

进一步的，设置有可扩展插件入口，可后续自定义插件加入到表格初始化中。

本发明还要求保护一种实现自定义web版excel的装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行上述的方法。

本发明还要求保护一种计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行上述的方法。

本发明的一种实现自定义web版excel的方法与现有技术相比，具有以下有益效果：

该方法操作简单，通过使用该方法，用户可轻松快捷的建立一个可自定义的网页版excel表格，用户只需根据自己需求，创建及修改表格内容及样式，最终生成用户想要的web页面。

该方法基于web展示可自定义任意数据的表格插件，其应用快速、方便，且灵活、简单，不需要高深的编码即可完成，不仅可以节约用户的时间，而且可以减轻服务器处理大量数据的压力。

附图说明

图1是本发明一个实施例提供的实现自定义web版excel的方法使用示意图；

图2是本发明一个实施例提供的实现自定义web版excel的功能开发架构图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明。

本发明实施例提供一种实现自定义web版excel的方法，使用typescript进行开发，然后编译成js文件进行使用，其实现方式为：

引入相关js文件；

在页面定义表格容器标签，

初始化excel脚本生成页面表格；

通过web页面配置，加载出用于和Excel或其他电子表格软件兼容的基于web的交互式HTML表格和电子表格。

Typescript可以提高代码的可读性，无疑能减少错误，或至少可以更快的捕获这些错误—即使是在编写或运行任何单元测试之前。本方法基于typescript开发web版自定义表格插件，有效避免一些bug出现且添加了类型校验。包括表格数据加载、数据编辑、样式修改、粘贴复制等等，以达到页面数据展示的效果。

其实现过程包括以下内容：

对页面进行初始化，传过来的容器dom生成table框架，所述初始化根据传过来的配置，初始化表格配置包括宽度、高度、class、id、样式和绑定的事件等等；如果没有传过来则取默认设置。

对初始化好的table框架，添加thead标签，设置默认class及样式，添加3列默认的th，

对初始化的好的table框架，添加tbody标签，设置默认class及样式，添加3列默认的tr，

如果初始化表格时，未传入数据则直接展示默认配置；

如果传入数据，对传过来的数据json做处理，循环编辑每一条数据，根据type生成不同的列与行，生成时把之前默认生成的3行3列覆盖掉。

对于不同type的数据分别编写处理方法：

针对type为text的数据，直接展示及添加相应的input输入框，绑定编辑功能；对于type为date的数据，展示时首先格式化成时间类型再添加日历插件绑定编辑功能；对于type为color的直接展示为对应的颜色并添加颜色插件，绑定编辑功能。

编写列拖动功能、筛选功能、排序功能、列宽拖动改变功能等，每个功能单独编写，并绑定到生成的thead上；

编写行拖动功能，可拖动排序，对每个字段包括双击编辑功能；

添加鼠标右键点击功能，右键点击弹窗选择复制行、删除行、刷新、粘贴等功能；

编写复制/粘贴功能，计算复制或粘贴起点坐标，利用鼠标拖动功能收集要复制或粘贴的数据，然后处理表格展示。

配置时还引入jsPDF，添加可配置按钮，可以生成图片或者pdf。

另外，留出可以扩展插件的入口，可后续自定义插件加入到表格初始化中。

整体的开发流程及主要功能参考图2所示，包括表格数据预加载、导入表格、导出表格、从表格工具中复制表格数据并粘贴到页面上、直接在表格上处理数据、添加行、添加列、设置表格头、设置表格样式、设置某一区域样式、将修改后数据保存成json文件、处理行数据、批量处理列数据等等功能设置。

该设计能够实现从HTML静态元素创建动态的jexcel表；高亮显示单元格的边框；图片上传(需接口支持)；颜色选择器；日历选择器；快速搜索及筛选等功能。

参考图1所示，其实现方式为：在要显示的页面引入js文件；添加表格展示容器；初始化jsexcel表格，传入表格设置及需要展示的数据json；在web端对表格数据进行操作，并把数据对应存储起来。

可预先设计要展示表格的模板，也可预先设计表格中某一行或某一列的数据，可根据后续用户在页面自定义加载的行列数据动态展示内容。

该方法解决excel在web页面上的编辑与查看问题，主要针对常用excel表格的财务系统、erp系统以及oa表单等。

该方法可以完全通过web页面配置，加载出用于和Excel或其他电子表格软件兼容的基于Web的交互式HTML表格和电子表格。通过该方法，用户可以从JS数组，JSON，CSV或XSLX文件创建在线电子表格表格；可以从excel复制并直接粘贴到页面电子表格上，同样也可以从页面表格复制并粘贴到excel中。可以集成第三方JavaScript插件来创建用户自己的自定义列，自定义编辑器，以及将任何功能自定义到应用程序中，例如日期选择权、颜色选择器等。

本发明还要求保护一种实现自定义web版excel的装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行上述实施例中所述的实现自定义web版excel的方法。

本发明还要求保护一种计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行上述实施例中所述的实现自定义web版excel的方法。

本发明实施例还提供了一种计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行本发明上述实施例中所述的文件分发方法。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。

在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。

用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RAM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。

此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。

此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。

上文通过附图和优选实施例对本发明进行了详细展示和说明，然而本发明不限于这些已揭示的实施例，基与上述多个实施例本领域技术人员可以知晓，可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例，这些实施例也在本发明的保护范围之内。