基于canvas实现office文档在浏览器中预览的方法与流程

1.本发明属于软件处理方法技术领域，具体涉及一种基于canvas实现office文档在浏览器中预览的方法。


背景技术：

2.svg中相当于都是dom元素，通过svg预览office文档时，会导致过度使用dom，从而影响复杂svg的渲染速度。在这样的背景下，canvas显示出了优势，首先它仅仅作为一个容器，不包含任何元素，其次在绘制时时逐像素进行渲染，一旦图形绘制完成，也就不会被浏览器继续关注。canvas作为html5的一部分，允许脚本语言动态渲染，所以在复杂图像的处理上更为灵活。
3.因此，有必要设计一种基于canvas实现office文档在浏览器中预览的方法来解决上述技术问题。


技术实现要素：

4.为解决现有技术中存在的技术问题，本发明提供了一种基于canvas实现office文档在浏览器中预览的方法，具体技术方案如下所述：
5.本发明的一种基于canvas实现office文档在浏览器中预览的方法，包括如下步骤：
6.步骤一：在永中软件中打开文件预览，在输入文件项目中，点击上传本地文件，选中需要预览的文档并点击打开；然后在输出文件选项中点击新页面预览；
7.步骤二：后台通过永中文档在线预览服务将用户上传的文档解析成特定结构的数据；
8.步骤三：浏览器通过axios建立http请求，去获取服务器指定位置的文件，并将文件并转化成json，从json中提取文档中包含的数据结构；
9.步骤四：在浏览器读取到json后，取到的是一个集合，然后循环读取集合里的内容，判断取到的子集类型；
10.步骤五：用户预览绘制完成后的网页。
11.优选的，所述步骤二中的数据解析流程具体为：服务器接收到预览请求时，将用户上传的文件，解压缩到固定的临时目录，其中包含了文档的xml结构；服务器通过xml结构，将各节点数据提取出来组成特定的数据结构；最后将数据结构写入到服务器指定位置，供浏览器获取访问。
12.优选的，所述步骤三中的去获取服务器指定位置的文件，改文件具体为步骤二中所述的特定结构的数据。
13.优选的，所述从json中提取文档中包含的数据结构，所述数据结构包括文档所用到的相关字体的信息，文档结构，页眉页脚，段落信息以及批注信息。
14.优选的，所述步骤四中的子集类型包括绘制文字、绘制图片、绘制图形以及绘制水
印。
15.优选的，步骤二中所述的特定结构的数据包括文档的属性和页面中的内容。
16.由于上述技术方案运用，本发明与现有技术相比具有如下一个或多个优点：
17.1.拥有pdf般的显示效果，可以再现原文档的每一个字符，颜色以及图像。
18.2.可以自适应不同的屏幕大小的同时保持显示效果。
19.3.针对用户端缺少的不常见字体，此技术方案支持内嵌该字体。
20.本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
21.结合参考附图及接下来的详细描述，本发明将更容易理解，其中同样的附图标记对应同样的结构部件，其中：
22.图1为本发明在一个实施例中文档预览的加水印后的效果图；
23.图2为本发明在一个实施例中未采用canvas预览技术的浏览器打开开发者选项的界面截图；
24.图3为本发明在一个实施例中采用canvas预览技术的浏览器打开开发者选项的界面截图；
25.图4为内嵌该字体实施例操作截图1；
26.图5为内嵌该字体实施例操作截图2；
27.图6为内嵌该字体实施例操作截图3；
28.图7为内嵌该字体实施例操作截图4；
29.图8为内嵌该字体实施例操作截图5；
30.图9为内嵌该字体实施例操作截图6；
31.图10为内嵌该字体实施例操作截图7；
32.图11为内嵌该字体实施例操作截图8。
具体实施方式
33.为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明做出进一步详细的说明。
34.此处所称的“一个实施例”或“实施例”是指与所述实施例相关的特定特征、结构或特性至少可包含于本发明至少一个实现方式中。在本说明书中不同地方出现的“在一个实施例中”并非必须都指同一个实施例，也不必须是与其他实施例互相排斥的单独或选择实施例。
35.实施例
36.一种基于canvas实现office文档在浏览器中预览的方法，具体实施方式如下：
37.一、如图1～图3所示，在永中软件中打开文件预览，在输入文件项目中，点击上传本地文件，选中需要预览的文档并点击打开；然后在输出文件选项中点击新页面预览；
38.二、后台通过永中文档在线预览服务将用户上传的文档解析成特定结构的数据，数据解析流程如下：
39.1、服务器接收到预览请求时，将用户上传的文件，解压缩到固定的临时目录，例如/usrs/yozo/xxxx/xxx/temp；其中包含了文档的xml结构。
40.2、服务器通过xml结构，将各节点数据提取出来组成特定的数据结构
41.3、最后，将数据结构写入到服务器指定位置，供浏览器获取访问，例如/usrs/yozo/dcs/output/2020/05/20/xxxxx；其中包含了index.json 0.json
……………
42.数据结构举例说明：
43.整篇文档数据分为，文档属性为index.json，作为入口，页面数据分别为0.json,1.json
……
，总数为文档总页数；文档属性如图4～9所示；
44.三、浏览器通过axios建立http请求，去获取服务器指定位置的文件(步骤2中写到服务器的数据结构)，并转化成json。从json中提取文档中包含的数据结构，例如文档所用到的相关字体的信息，文档结构，页眉页脚，段落信息，批注信息等等；请求部分代码如图10所示；
45.四、如图11所示，浏览器读取到json(取到的是一个集合)后，然后循环读取集合里的内容，判断取到的子集是哪种类型；具体类型如下：
46.1、绘制文字：当判断循环到的数据类型是文字时，如图四的数据结构，通过aid到index.json中获取字体对应属性如图三，起始x坐标startx，后续文字的坐标集合charx,y坐标y，然后通过canvas绘制文字的方法filltext(text,x,y)绘制到页面上。
47.2、绘制图片：当判断循环到的数据类型是图片时，如图五的数据结构，如果不平铺可直接通过canvas绘制图片的方法drawimage(image,x,y,width,height)绘制到页面上，如果需要平铺则需要先context.createpattern(image,"repeat")表示图片需要平铺，然后再绘制。
48.3、绘制图形：当判断循环到的数据类型是图形时，如图六的数据结构，先设置线条属性，context.linewidth＝linewidth线条宽度context.linecap＝linecap端点样式，context.alpha＝alpha透明度,context.strokestyle＝strokecolor线条颜色，然后通过canvas绘制图形的方法context.stroke()绘制到页面上。
49.4、绘制水印：当判断循环到的数据类型是水印时，如下午所示的数据结构，相比文字的数据结构，textindent水印间距，istile是否平铺，istextup是否显示在文字上方，angle旋转角度，如果需要平铺则将水印的文字大小加上间距，作为一个整体，可以类似看成是个图片，然后使用图片平铺的方式平铺到页面上，如果不需要平铺，则水印的xy坐标轴对应为二分之一页面宽度和二分之一页面高度。
50.五、用户预览绘制完成后的网页。
51.上述说明已经充分揭露了本发明的具体实施方式。需要指出的是，熟悉该领域的技术人员对本发明的具体实施方式所做出的任何改动均不脱离本发明的权利要求书的范围。相应地，本发明的权利要求的范围也并不仅仅局限于前述具体实施方式。