一款讓你優雅、高效實現文件預覽的解決方案

​

 前言

項目開發中，不少系統都會涉及到文件操做，好比常見的上傳、下載等，這些也都是司空見慣的事情，也比較容易實現。可是有些狀況下，須要支持文件的在線預覽功能，因爲文件格式衆多，不一樣的文件處理方式不一樣，使得預覽顯得比較複雜，實現起來也相對困難。本文結合本身的開發實戰狀況，總結下目前經常使用的三種模式及利弊關係，重點講述下公司實現預覽的功能代碼及服務的搭建過程。

經常使用三種實現方式及優缺點

方式一 使用officeapps的在線連接方式實現

具體爲view.officeapps.live.com/op/view.asp…此處的url表明文件的wai網訪問路徑。注意：該url必須是wai網能夠訪問的路徑，不然沒法預覽。參考代碼以下：

https://view.officeapps.live.com/op/view.aspx?src=https://demo.jeesite.com/js/a/file/download/1148195356402933760.doc

預覽效果：

​

優勢：實現簡單，不須要添加單獨搭建預覽服務，頁面中能夠經過聲明方法的形式添加預覽按鈕，而後對點擊事件追加如上所示的代碼塊中的路徑便可實現預覽功能

缺點：url路徑必須爲wai網能夠訪問的文件路徑，若是文件所存儲的服務器沒法經過wai網訪問，該該方式沒法實現預覽，並且因爲預覽時服務會從服務器讀取文件信息，因此會存在安全隱患，對於一些涉及隱私的文件來講，此種方式顯示不可取。另外，因爲是第三方在線服務，若是officeapps服務關閉的狀況下，項目中的功能會受到影響。

方式二 本身搭建office-online服務

優勢：服務的開啓和關閉權掌握在本身手中，不用擔憂服務關停的狀況。另外，服務也不須要wai網訪問，將文件和office online服務存放到同一臺服務器便可。

缺點：服務體量較大，搭建過程比較繁瑣，對硬件系統也都有要求(安裝環境必須爲兩臺Windows Server 2012 R2 或 Windows Server 2016服務器，一臺安裝office online服務，一臺安裝域控服務)，還要安裝對應的依賴環境，且額外增長了服務器成本開銷，操做起來也相對繁瑣，因此不太推薦該方法。

方式三 使用開源服務kkFileView對應的jar包手動搭建預覽服務(windows、linux環境都可實現)

優勢：第三方jar包，不須要額外增長開發成本，下載部署便可使用，操做簡單，使用方便

缺點：jar包中有些文檔格式不支持(不過能知足日常涉及的大部分文件類型)，並且表格有些預覽樣式不友好，可能須要手動修改jar包源碼。

綜上所述，使用kkFileView對應的jar包無疑是性價比最好的一種實現方式。 接下來重點講述kkFileView搭建預覽服務的過程，主要分爲兩部分，windows版本和linux版本服務搭建。

1 window版本服務搭建

搭建流程：

1. 1 將下載的.zip包解壓

1. 2 進入到bin目錄，雙擊.bat文件運行便可

1. 3 vue頁面中須要添加預覽按鈕，引入方法，進行路徑拼接調用，代碼以下，url爲文件完整物理路徑，若是使用nginx代理的話，爲wang絡代理路徑，其中localhost:8012爲預覽服務的訪問路徑，我的建議儘可能將localhost換成ip，而且將http://localhost:8012/onlinePreview?url= 作成可配置的路徑配置到前端所在的文件中動態讀取

fileView: function(url) {
  let Base64 = require('js-base64').Base64;
  window.open('http://localhost:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));  
},

注意: 因爲方法使用了base64進行加密url路徑，因此vue框架要引入base64組件，安裝命令以下：

npm install --save js-base64 或者cnpm install --save js-base64

1. 4 服務訪問 網址輸入localhost:8012或ip:8012，回車，若是看到以下界面，表明成功

​

而後點擊選擇文件--上傳--預覽，便可看到效果，而後在項目中點擊本身的預覽按鈕能夠查看具體效果。

截圖以下：

​

​

2 linux版本服務搭建

搭建流程：

2. 1 將下載的.tar.gz包解壓

2. 2 進入到bin目錄，運行.sh腳本文件

2. 3 因爲linux系統下缺乏中文字體，文件預覽時可能出現亂碼狀況，因此須要安裝相應字體，首先下載字體包, 而後將文件解壓完整拷貝到Linux下的 /usr/share/fonts目錄安裝，如圖

​

完成執行如下三個命令使字體生效

​

1. 4 服務訪問 網址輸入localhost:8012或ip:8012，回車，若是看到以下界面，表明成功

​

預覽同window下操做。

備註:文件下載有效期爲30天，若是出現不能下載的狀況，能夠給小編留言評論獲取新的連接。

最後

最近我整理了整套《JAVA核心知識點總結》,說實話 ,做爲一名Java程序員,不論你需不須要面試都應該好好看下這份資料。拿到手老是不虧的~個人很多粉絲也所以拿到騰訊字節快手等公司的Offer

進【Java進階之路羣】，找管理員獲取哦-！

​

​

​