最近由于公司项目需要，搜索了大量提供文档在线预览服务的厂家，学习了不少相关实现方法。经过深入了解后，发现其中存在的一些问题，今天就文档在线预览的传输数据问题写写我的不成熟见解，也希望得到大家的指点。
大家都知道永中文档在线预览可以快速解析常用办公文件，将文档原样输出为HTML、PDF或图片，以及不同格式文档之间的相互转换，实现即点即得，无需下载，快速高效，轻松实现文档在线安全阅读。
但对于文档预览从文件解析到前端展示在线预览的过程，如从永中office中EIO的解析，到DCC处理后输出的文档数据传给前端的过程中势必要经过网络的传输过程，这时候如果是网络状态不加的话，实际给用户造成的体验不加就是造成页面加载延迟，文件资源请求速度缓慢。
永中预览一种模式采用后台解析文件内容输出成json文件的数据模式，提供给前端加载数据从而通过canvas绘制的方式渲染页面展示给用户，这种情况一般大小的文件输出的json文件数据最大也就是几百kb的大小，但是如果有一类文件内容很多，里面文件内容是千奇百怪的情况下，很有可能会造成一个json文件大小超过1mb或者是几mb甚至更大都有可能，这时候，前端再去请求加载这个这个极其庞大的json数据文件的时候，势必会造成一定时间的损耗。
说到这里很多同学认为可以用gzip，通过node、tomcat、nginx都可以配置gzip，确实gzip能在压缩的基础上再进行压缩50%以上，如下图就可以看出，这里就不过多做赘述了，相信同学们都懂的ㄟ(≧◇≦)ㄏ。
好了下面直接切入正题，这里通过前端插件JSZip来处理读取文件的数据，后台通过输出解析文件输出json文件，对文件进行压缩成 .zip 格式生成在文件夹路径下,如下图可以看出，文本的数据压缩率相当可观，如下demo.json就可以看出（这里再拿excel预览作为例子来说，每100行为一个json文件，如果当这个文件的总列数很多，里面内容又是过多的，压缩一下还是很有必要的，看起来不那么庞大了 (((o(*ﾟ▽ﾟ*)o)))）
JSZip具体使用如下步骤：
第一步：安装JSZip
1.npm安装（如下图）
2.script标签直接引入（如下图）
第二步：使用JSZip (以上两种方法都可以安装JSZip ，这里我们就以npm安装为例)
1. 安装完毕后，首先我们导入JSZip（如下图）
2.创建JSZip对象（这里用的是ts的类，如下图）
第三步，读取zip文件的数据（这里需要调用一个loadAsync的api,如下图）
具体的详情，感兴趣的同学可以上JSZip的github上面去看看，我把地址先贴上https://stuk.github.io/jszip/documentation/api_jszip/load_async.html
具体代码操作，注意请求返回的是个promise对象（如下图）
具体网络请求详情如下（如下图）
在调用loadAsync之后还需调用async()方法，里面一般参数传string，如果此方法不调用会返回如下信息（如下图）
在调用async之后，就可以显示正常需要的数据了（如下图）
然后，拿到数据之后，前端就可以做之后的操作了，渲染展示给用户，实现在线预览了。
不过，在这我这边抛出一个疑问，有知道的同学，还请提提宝贵的意见，有什么解决方案，就是JSZip在IE9的环境下会抛出错误，10和11都是支持的，还请知道的同学，帮忙参谋参谋这个兼容性的问题怎么去解决︿(￣︶￣)︿，我这边试了一些兼容的插件也没有什么用，大家有知道可以交流交流，十分感谢！o(^▽^)o ，具体报错（如下图）
最后，多谢大家的支持，写得不好，分享一些心得，有写的不好的地方多多指出，感谢大家！！！ *★,°*:.☆(￣▽￣)/$:*.°★*