最近因為工作需求，調研了實作文檔線上預覽功能的方式，總結了一下，大概的實作方式由後端統一轉成圖檔或者pdf或者html傳回前端，再由前端進行展示。還有就是前端根據不同檔案類型使用對應的線上預覽元件進行線上預覽。因為每種實作方式的内容都比較多，限于篇幅，是以之前拆成了五篇文章進行說明：
文檔線上預覽新版（一）通過将檔案轉成圖檔實作線上預覽功能
文檔線上預覽新版（二）通過将檔案統一轉成html以實作線上預覽
文檔線上預覽新版（三）通過将檔案統一轉成pdf來實作線上預覽
文檔線上預覽新版（四）使用js前端元件實作文檔線上預覽
文檔線上預覽新版（五）在伺服器部署元件來實作線上預覽
因為拆成了多篇文章，内容比較分散，是以本文将對這幾種方式進行進行一個總結，闡述每種實作方式的大緻流程，以及比較一下每種實作方式的優缺點。
實作方式一、由後端統一将文檔轉成圖檔，再傳回給前端進行展示
這方式是由後端通過aspose-words（用于txt、word轉圖檔），pdfbox（用于pdf轉圖檔）、Graphics2D （用于excel等檔案轉圖檔）等元件将文檔統一轉換成圖檔，再傳回給前端進行展示。詳細的實作可以參考這篇文章：
《文檔線上預覽新版（一）通過将檔案轉成圖檔實作線上預覽功能》
這種方式的優點是：
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的顯示效果往往和原文檔不太一樣。這意味着對于較複雜的文檔而言，這種轉換不太可能是完美的。但如果都是隻使用簡單樣式文檔或者對文檔樣式不太關心的這種方式也不妨一試。詳細的資訊可以參考這篇文章：
《文檔線上預覽新版（二）通過将檔案統一轉成html以實作線上預覽》
這種方式的優點是：
1、前端處理比較友善
2、浏覽器天然支援
這種方式的缺點是：
1、轉換後樣式可能和原檔案存在些許的差別
實作方式三、由後端統一将文檔轉成pdf，再傳回給前端進行展示
這方式是由後端通過aspose-words（用于txt、word轉pdf），itextpdf（用于excel轉pdf）或者spire.office.free（用于excel轉pdf）等元件将文檔統一轉換成pdf檔案，再傳回給前端進行展示。
将 txt、word、excel、ppt、圖檔等檔案轉成pdf檔案詳細的實作方式可以參考這篇文章：
《文檔線上預覽新版（三）通過将檔案統一轉成pdf來實作線上預覽》
前端線上預覽pdf檔案的實作方式可以參考這篇文章：《文檔線上預覽新版（四）使用js前端元件實作文檔線上預覽》中 PDF檔案實作前端預覽 部分。
這種方式的優點是：
1、和傳回圖檔相比隻會傳回一個檔案，前後端都不需要考慮多檔案的問題
2、主流的浏覽器都自帶支援pdf的展示
這種方式的缺點是：
1、前端對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.js、pdfobject.js、vue-pdf | |
| excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
| powerpoint（pptx） | pptxjs |
這種方式是前端根據不同檔案類型使用對應的線上預覽元件進行線上預覽。因為不同類型的線上預覽元件不一樣在使用時預覽界面會存在差異，如果需要做的完善一點 最好是把所有用到的元件都統一封裝的一個線上預覽的UI界面中。詳細的資訊可以參考這篇文章：
《文檔線上預覽新版（四）使用js前端元件實作文檔線上預覽》
這種方式的優點是：
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、伺服器安裝元件實作線上預覽，使用雖然有一定的學習成本，功能比較完善，支援檔案格式比也較多。甚至有的元件還能支援線上編輯。也是比較推薦的。