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

来源:https://www.cnblogs.com/cool-net/archive/2022/12/01/16922487.html
-Advertisement-
Play Games

###伺服器：WindowsServer 2016 ###Cloudreve 需求方想整一個在小團隊內部使用的網盤系統，最終在千挑萬選之下選中了Cloudreve。 Github地址：https://github.com/cloudreve/Cloudreve 官網地址：https://docs.c ...


伺服器：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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • idea提交git時過濾掉不必要的文件
    大家好，這裡是 main工作室。 開發工具合集 是 電腦編程語言 和 嵌入式軟體/硬體 開發工具的下載與安裝，每篇一個開發工具。 本篇所講的開發工具為： Dev-Cpp 一、介紹 Dev-Cpp Dev-Cpp 是一個 Windows 環境下的一個適合於初學者使用的輕量級 C/C++ 集成開發環境 ...
  • golang的jsonrpc客戶端通用寫法
    服務端 package main import ( "errors" "fmt" "log" "net" "net/rpc" "net/rpc/jsonrpc" "os" ) // 算數運算結構體 type Arith struct { } // 算數運算請求結構體 type ArithReques ...
  • 實踐案例：同程藝龍網的 Dubbo 升級經驗總結
    什麼是緩存？ 為什麼使用緩存？ 什麼場景下使用緩存？ 緩存（Cache）就是數據交換的緩衝區，一個臨時存儲數據的地方，當我們讀取數據時會首先從緩存中查找需要的數據，如果找到了則直接執行，找不到的話再從記憶體中找。 在實際開發中，我們會經常對資料庫進行數據查詢，而從資料庫讀取數據的效率是非常低下的，並且 ...
  • <三>關於對象優化
    代碼1 #include <iostream> using namespace std; class MyString3 { public: MyString3(const char * pChar=nullptr) { if (pChar == nullptr) { this->pString = ...
  • Linux 基礎-文件許可權與屬性
    一個基本概念：任何裝置在 Linux 下都是文件，數據溝通的介面也有專屬的文件在負責，Linux 的文件種類繁多，常用的是一般文件(-)與目錄文件(d)。 註意：Linux 文件類型和文件的文件名所代表的意義是兩個不同的概念，在 linux 中文件類型與文件擴展名沒有關係。它不像 Windows 那... ...
  • day11_多態&抽象類&介面
    1、多態 1.1 多態的概述（記憶） 什麼是多態 同一對象，在不同時刻表現出來的不同形態。 多態的前提 有繼承/實現關係 有方法重寫 有父類對象的引用執行子類對象 1.2 多態中的成員訪問特點（記憶） 成員訪問特點 成員變數：編程看父類，運行看父類 成員方法：編譯看父類，運行看子類 代碼演示 pub ...
  • 1.類&對象&構造方法
    1. 類和對象的記憶體處理方式 1.1 方法區（method area） 也稱靜態區，用於存放用戶定義的各個類、靜態變數等。 1.2 堆(heap) 堆中存放對象和非靜態變數。 在使用new關鍵字產生對象後，對象會存放進堆中進行管理，對象名就是對象在堆中的地址。 對象把被它調用的成員變數直接存儲到堆中 ...
  • Pandas太慢？快使用Vaex DataFrame，每秒數億數據算起來 ⛵
    本文詳細介紹了Vaex這個強大的工具庫，能夠每秒處理數億甚至數十億行數據，而無需將整個數據集載入到記憶體中。對於大型數據的分析任務，Vaex的效率更簡單，對硬體/環境的要求更少！pandas升級版！快用起來吧~ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類