最近因为工作需求，调研了实现文档在线预览功能的方式，总结了一下，大概的实现方式由后端统一转成图片或者pdf或者html返回前端，再由前端进行展示。还有就是前端根据不同文件类型使用对应的在线预览组件进行在线预览。因为每种实现方式的内容都比较多，限于篇幅，所以之前拆成了三篇文章进行说明：

文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能

文档在线预览（二）word、pdf文件转html以实现文档在线预览

文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览

因为拆成了多篇文章，内容比较分散，所以本文将对这几种方式进行进行一个总结，阐述每种实现方式的大致流程，以及比较一下每种实现方式的优缺点。

实现方式一、由后端统一将文档转成图片，再返回给前端进行展示

这方式是由后端通过aspose-words（用于txt、word转图片），pdfbox（用于pdf转图片）、Graphics2D （用于excel等文件转图片）等组件将文档统一转换成图片，再返回给前端进行展示。详细的实现可以参考这篇文章：《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》

这种方式的优点是：

1、图片在线预览控件比较多，也比较成熟，前端起来比较方便

2、文档转成图片后能有效减少文档内容被复制的情况

3、浏览器也天然支持

这种方式的缺点是：

1、文档往往都不只一页，所有同城的做法将文档的每一页都生成一张图片，所以前后端都需要考虑处理多张图片的问题

2、如果图片都以base64的格式返回给前端，会造成返回体过大的问题，如果返回有加日志还会存在日志体较长，增加日志服务器的问题。

3、因为base64的格式直接返回返回体过长，好一点的做法现将图片上传到图片服务器，只返回图片的url，这样解决了图片返回体过长的问题，但要先将多张图片先上传到图片服务器，这样会不可避免的拖慢接口的返回速度，尤其是在文档页数较多的时候，同时也会增加图片服务器的压力。

实现方式二、由后端统一将文档转成pdf，再返回给前端进行展示

这方式是由后端通过aspose-words（用于txt、word转pdf），itextpdf（用于excel转pdf）或者spire.office.free（用于excel转pdf）等组件将文档统一转换成pdf文件，再返回给前端进行展示。

将 txt、word、excel、ppt、图片等文件转成pdf文件详细的实现方式可以参考这篇文章：《将word、txt、ppt、excel、图片等文件转成pdf文件实现方式》

前端在线预览pdf文件的实现方式可以参考这篇文章：《文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览》中 PDF文件实现前端预览 部分。

这种方式的优点是：

1、和返回图片相比只会返回一个文件，前后端都不需要考虑多文件的问题

2、主流的浏览器都自带支持pdf的展示

这种方式的缺点是：

1、前端对pdf在线预览实现成本要比图片高一些

实现方式三、由后端统一将文档转成html，再返回给前端进行展示

这种方式是由后端通过aspose-words（用于word转html），pdfbox（用于pdf转html）等组件将文档统一转换成html，再返回给前端进行展示。注意这种方式往往都存在一个问题，一般再将文档转换成html代码，往往都是追求目标是通过使用文档中的语义信息并忽略其他细节来生成简单干净的 HTML，所以在转换过程中复杂样式被忽略，比如居中、首行缩进、字体，文本大小，颜色。举个例子在转换是 会将应用标题 1 样式的任何段落转换为 h1 元素，而不是尝试完全复制标题的样式。所以转成html的显示效果往往和原文档不太一样。这意味着对于较复杂的文档而言，这种转换不太可能是完美的。但如果都是只使用简单样式文档或者对文档样式不太关心的这种方式也不妨一试。详细的信息可以参考这篇文章：

《文档在线预览（二）将word、pdf文件转html实现文档在线预览》

这种方式的优点是：

1、前端处理比较方便

2、浏览器天然支持

这种方式的缺点是：

1、转换后样式可能和原文件存在些许的区别

实现方式四、纯前端实现在线预览

​ 通过这次在线预览的调研，发现其实word、excel、pdf、ppt 等文件格式都有在线预览的前端js的开源组件，而且数量还不少，我整理了一下这些开源组件放在了下面的表格里。

​ 这种方式是前端根据不同文件类型使用对应的在线预览组件进行在线预览。因为不同类型的在线预览组件不一样在使用时预览界面会存在差异，如果需要做的完善一点 最好是把所有用到的组件都统一封装的一个在线预览的UI界面中。详细的信息可以参考这篇文章：

《文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览》

这种方式的优点是：

1、后端没有工作量

这种方式的缺点是：

1、前端工作量较大

2、不同文件类型的显示UI不太一样，如果需要统一UI则会进一步增加前端的工作量

3、除了图片和pdf的展示外，其他文件类型的展示不算非常理想

总结

四个在线预览的方式的实现和效果可以说是各有千秋，但或多或少也都存在一定的问题，比如转图片的都是存在要处理多图片的问题，转html存在复杂样式丢失的问题，纯前端实现存在前端开发量较大、除了图片、pdf外其他格式的预览效果不尽完美的问题。总体而言从本文的测试情况来看前端实现预览最好的效果还是PDF，不会出现一些文字错乱和乱码的问题，所以个人比较倾向的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。