文档在线预览 总结篇

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

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

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

文档在线预览（四）将word、txt、ppt、excel、图片转成pdf来实现在线预览

文档在线预览（五）在服务器部署组件来实现在线预览

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

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

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

这种方式的优点是：

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

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

3、浏览器也天然支持

这种方式的缺点是：

1、文档往往都不只一页，所有同城的做法将文档的每一页都生成一张图片，所以前后端都需要考虑处理多张图片的问题（可以考虑把图片都放到一个html或者pdf里）

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

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

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

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

这种方式的优点是：

1、前端处理比较方便

2、浏览器天然支持

这种方式的缺点是：

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

实现方式三、由后端统一将文档转成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在线预览实现成本要比图片高一些

如果想要展示效果好的话，其实可以将上篇文章《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》说的内容和本文结合起来使用，即将文档里的内容都生成成图片（很可能是多张图片），然后将生成的图片全都放到一个html页面里 ，用html+css来保持样式并实现多张图片展示，再将html返回。开源组件kkfilevie就是用的就是这种做法。

kkfileview展示效果如下：

下图是kkfileview返回的html代码，从html代码我们可以看到kkfileview其实是将文件（txt文件除外）每页的内容都转成了图片，然后将这些图片都嵌入到一个html里，再返回给用户一个html页面。

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

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

文档格式	相关的开源组件
word(docx)	docx-preview、mammoth
pdf	pdf.js、pdfobject.js、vue-pdf
excel	sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables
powerpoint（pptx）	pptxjs

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

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

这种方式的优点是：

1、后端没有工作量

这种方式的缺点是：

1、前端工作量较大

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

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

实现方式五、服务器安装组件实现在线预览

通过这次在线预览的调研，发现几款商用或者开源服务器组件，安装之后即可实现在线预览，使用虽然有一定的学习成本，但是胜在功能比较完善。 详细的信息可以参考这篇文章：

文档在线预览（五）在服务器部署组件来实现在线预览

1、kkfileview

开源组件，只支持在线预览，不支持编辑。实现原理是通过转成图片+html的方式实现的（txt文件除外），源文件的内容都被转成了图片，然后放到html中以保持样式。

通过转成图片+html的方式实现的（txt文件除外），源文件的内容都被转成了图片，然后放到html中以保持样式

支持doc、docx、ppt、pptx、wps、xls、xlsx、zip、rar、ofd、xmind、bpmn 、eml 、epub、3ds、dwg、psd 、mp4、mp3等类型。

预览效果如下：

2、OnlyOffice

开源组件，既能支持在线预览，也支持编辑 。支持docx、xlsx、pptx、odt、ods、odp、doc、xls、ppt、pdf、txt、rtf、html、epub、csv等类型。

预览效果如下：

3、office online server

由微软出品付费商用组件，既能支持在线预览，也支持编辑 。基本可以支持所有的Office文件格式。Office Online Server只能部署在Windows Server 2012 R2、Windows Server 2016或 Windows Server 2019 或 Windows Server 2022等服务器上。

预览效果如下

4、Libre Office Online（不推荐）

开源组件，既能支持在线预览，也支持编辑 。但是缺乏官方的支持，所以更推荐基于基于LibreOffice开发的Collabora Online。

5、Collabora Online

开源组件，既能支持在线预览，也支持编辑 。基于LibreOffice办公套件的在线协作平台。

预览效果如下

总结

1、转成图片的方式和转成html，都存在一定的问题，比如转图片的都是存在要处理多图片的问题，转html存在复杂样式丢失的问题。比较好的一种做法就是即将文档里的内容都生成成图片（很可能是多张图片），然后将生成的图片全都放到一个html页面里 ，用html+css来保持样式并实现多张图片展示，再将html返回。开源组件kkfilevie就是用的就是这种做法，可以参考一下kkfilevie的做法(都参考了为什么不直接拿来用，滑稽表情)。

2、前端通过判断不同文件类型的使用对应的在线预览组件进行在线预览。 因为不同类型的在线预览组件不一样在使用时预览界面会存在差异，如果需要做的完善一点 最好是把所有用到的组件都统一封装的一个在线预览的UI界面中。但是这样做的话，前端的开发量较大。

3、后端统一将不同格式的文件转换成pdf格式实现在线预览，再由前端实现预览效果，这样能保留文件的一些样式的效果。这种方式实现成本比较低，预览效果也不错，简单的预览需求比较推荐。

4、服务器安装组件实现在线预览，使用虽然有一定的学习成本，功能比较完善，支持文件格式比也较多。甚至有的组件还能支持在线编辑。也是比较推荐的。