在Cloudreve網盤系統中整合kkFileView線上預覽（暫時）

暢飲無緒發表於2022-12-01
CloudView

伺服器：WindowsServer 2016

Cloudreve

需求方想整一個在小團隊內部使用的網盤系統，最終在千挑萬選之下選中了Cloudreve。

Github地址：https://github.com/cloudreve/Cloudreve

官網地址：https://docs.cloudreve.org

Cloudreve是採用go + React開發的開源網盤系統，優點是部署簡單、介面功能精簡好用、更新比較活躍、文件詳細，目前在Github的Star 1.6w+。

第一步：下載

下載後的檔案結構如下圖所示（只有cloudreve.exe和conf.ini）

image

nssm下載連結

提取碼: dtbb

第二步：修改配置檔案

配置檔案主要還是配置埠和資料庫，其他詳細配置可以去官網檢視

[System]
Debug = false
Mode = master
Listen = :7018
SessionSecret = iA9nowZRHi6s5XSAFEVrNl0njyqZfjmx6mZQGWVBbMQG32SE5dx6pVWPTNTeByTh
HashIDSalt = 5hrN8NvlA7LxdVJCkjlHb5A1Ut2Rph85GqfhwZWvpn2tnGi79uEomziXkHStFMZT

[Database]
Type = mysql
Port = 3306
User = cloudreve
Password = xxxxx
Host = 0.0.0.0
Name = Cloudreve
TablePrefix = cd
Charset = utf8

第三步：啟動

雙擊cloudreve.exe檔案便可以直接啟動，啟動成功的介面如下：

image

初始化的資料庫表：

image

真正使用還是建議部署成windows服務，這時候可以使用上面提到的nssm工具。

cd到nssm工具對應的目錄，輸入：nssm install便會出現如下介面：

image

安裝成功後，進到服務管理啟動對應的服務即可。

系統成功啟動後的介面如下：

image

kkFileView

網盤部署好了，需求方又提了個需求，想要支援線上預覽。

Cloudreve自帶預覽PDF和TXT格式的檔案，如果需要預覽Office相關檔案就需要自己對接第三方服務。

目前提供線上預覽的第三方服務有很多，比如微軟大大就提供有免費的文件線上預覽服務，但前面有說到，網盤系統是在內部使用，這一條只能pass，第三方不行那就自己做第三方。

於是，萬能的Github又登場了。

kkFileView是採用java開發的檔案文件線上預覽方案，目前在Github的Star 7.8K+。

Github地址：https://github.com/kekingcn/kkFileView

Gitee地址：https://gitee.com/kekingcn/file-online-preview

官網地址：https://kkfileview.keking.cn

兩個系統都有個優點，就是部署簡單，文件詳細。

下載下來的檔案結構如下，點選 startup.bat 檔案等待片刻後在瀏覽器中開啟：http://localhost:8012 便會看到kkFileView的測試頁面。

image

image

如果能看到上圖就表示啟動成功了，大家可以自行在測試頁面上測試相關檔案的預覽效果，具體的引數配置可以參考官方文件，非常詳細。

整合

上面兩步我們已經將網盤服務和線上預覽服務都部署成功了，接下來就是合二為一。

我們先進到Cloudreve的管理皮膚 —— 引數設定，有兩個資訊我們需要配置。

1、站點URL記得新增埠號

image

2、影像與預覽修改Office 文件預覽服務地址：http://127.0.0.1:8012/onlinePreview?url={$srcB64}

image

最後點選儲存幾即可。

配置成功後，我們去試試預覽效果，雙擊對應的檔案：

image

誒，怎麼回事，預覽失敗了，而且這個檔案型別 lpmatwo4pg1n8bc6 是什麼鬼。

其實這與kkFileView的預覽機制有關係，kkFileView預覽是透過下載地址的檔案字尾名去判斷檔案型別，但Cloudreve生成的下載連結檔名是一串隨即字元且不包括檔案字尾，所以kkFileView在處理時不知道對應的檔案型別，導致預覽失敗。

知道問題了就有解決辦法：

  1. 修改Cloudreve的下載連結生成邏輯，使其帶上檔案字尾

  2. 修改kkFileView的檔案型別識別邏輯

因為Cloudreve是將前後端統一打包成exe可執行程式，如果修改後還要打包太麻煩，所以放棄解決辦法一（其實這個解決辦法才是相對科學的。）

修改

先去Gitee或者Github下載kkFleView原始碼

下載下來後可以根據如下路徑找到對應檔案：

file-online-preview-master\server\src\main\java\cn\keking\web\controller\OnlinePreviewController.java

修改思路：根據檔案的前n個起始位元組，也被稱為魔數去判斷對應檔案屬於什麼檔案型別，但是這個方法也存在缺陷，wps和office相關檔案的魔數一樣，無法做詳細區分，比如：docx、xlsx、pptx。

上程式碼

因為本人是微軟陣營的，對Java這塊不熟悉，程式碼僅做參考。

1、建立魔數與檔案型別的鍵值對對映關係（只列舉了常用的一些，準不準確大家可以自行驗證）
public final static Map<String, String> FILE_TYPE_MAP = new HashMap<String, String>();

static {
    FILE_TYPE_MAP.put("ffd8ff", "jpg");
    FILE_TYPE_MAP.put("89504e47", "png");
    FILE_TYPE_MAP.put("47494638", "gif");
    FILE_TYPE_MAP.put("49492a00227105008037", "tif");
    FILE_TYPE_MAP.put("424d228c010000000000", "bmp"); // 16色點陣圖(bmp)
    FILE_TYPE_MAP.put("424d8240090000000000", "bmp"); // 24位點陣圖(bmp)
    FILE_TYPE_MAP.put("424d8e1b030000000000", "bmp"); // 256色點陣圖(bmp)
    FILE_TYPE_MAP.put("41433130313500000000", "dwg");

    FILE_TYPE_MAP.put("68746d6c3e", "html"); // HTML
    FILE_TYPE_MAP.put("48544d4c207b0d0a0942", "css");
    FILE_TYPE_MAP.put("696b2e71623d696b2e71", "js");
    FILE_TYPE_MAP.put("38425053000100000000", "psd");
    FILE_TYPE_MAP.put("255044462d312e", "pdf");
    FILE_TYPE_MAP.put("75736167", "txt");

    FILE_TYPE_MAP.put("00000020667479706d70", "mp4");
    FILE_TYPE_MAP.put("49443303000000002176", "mp3");
    FILE_TYPE_MAP.put("41564920", "avi");

    FILE_TYPE_MAP.put("3c3f786d6c", "xml");// xml檔案
    FILE_TYPE_MAP.put("504b03040a000", "office");// office檔案
    FILE_TYPE_MAP.put("504b030414000", "office");// office檔案
    FILE_TYPE_MAP.put("d0cf11e0a1b11ae10000", "wps");// WPS文字wps、表格et、演示dps都是一樣的
}

注意：office和wps下的相關檔案（docx、xlsx、pptx）的魔數都一樣，所以大家可以預設設定成其中一種即可（我預設的是xlsx），kkFileView預覽office相關檔案依賴的是OpenOffice和LibreOffice。

2、根據檔案流判斷檔案型別
/**
 * 獲取檔案型別
 */
private String getFileType(String fileUrl) throws IOException {
    URL newUrl = new URL(fileUrl);
    HttpURLConnection conn = (HttpURLConnection) newUrl.openConnection();
    InputStream inputStream = conn.getInputStream();
    byte[] bytes = IOUtils.toByteArray(inputStream);

    StringBuilder stringBuilder = new StringBuilder();
    for (int i = 0; i < 20; i++) {
        int v = bytes[i] & 0xFF;
        String hv = Integer.toHexString(v);
        if (hv.length() < 2) {
            stringBuilder.append(0);
        }
        stringBuilder.append(hv);
    }

    String fileCode = stringBuilder.toString().toLowerCase();
    String fileType = null;
    Iterator<String> keyIter = FILE_TYPE_MAP.keySet().iterator();
    while (keyIter.hasNext()) {
        String key = keyIter.next();
        if (fileCode.startsWith(key)) {
            fileType = FILE_TYPE_MAP.get(key);
            break;
        }
    }
    return fileType;
}
3、找到OnlinePreviewController.java檔案的對應方法

image

image

主要是在getFileAttribute方法內加一層字尾名的處理，為了不影響原方法，所以我們新增一個

/**
 * 獲取檔案屬性（擴充套件無字尾名）
 *
 * @param url url
 * @return 檔案屬性
 */
public FileAttribute getFileAttributeEx(String url, String suffix, HttpServletRequest req) {
    FileAttribute attribute = new FileAttribute();
    FileType type;
    String fileName;
    String fullFileName = WebUtils.getUrlParameterReg(url, "fullfilename");
    if (StringUtils.hasText(fullFileName)) {
        fileName = fullFileName;
        type = FileType.typeFromFileName(fullFileName);
        suffix = KkFileUtils.suffixFromFileName(fullFileName);
    } else {
        fileName = WebUtils.getFileNameFromURL(url);
        String newUrl = url;
        int index = newUrl.indexOf("?");
        if (index < 0) {
            newUrl = newUrl + "." + suffix;
        } else {
            newUrl = newUrl.substring(0, index) + "." + suffix + newUrl.substring(index, newUrl.length() - 1);
        }
        type = FileType.typeFromUrl(newUrl);
        suffix = WebUtils.suffixFromUrl(newUrl);
    }
    if (url.contains("?fileKey=")) {
        attribute.setSkipDownLoad(true);
    }
    attribute.setType(type);
    attribute.setName(fileName + "." + suffix);
    attribute.setSuffix(suffix);
    attribute.setUrl(url);

    ......

    return attribute;
}

完事後我們再來看看預覽效果：

原檔案：

image

預覽效果：

image

注意：kkFileView對xlsx和xls檔案的處理預設是以html形式轉換，其他檔案都是以pdf形式，由於xlsx和xls轉pdf後的效果太過凌亂，權衡利弊下office和wps相關的檔案全部指定為xlsx，以html形式展示。

image

最後，這個問題其實很早就有人提出過，Cloudreve的作者也在Issues中回覆下個版本會增加單獨副檔名變數，所以文章的解決方案僅僅做一個分享，大家等Cloudreve版本更新會更好。

image

相關文章