官網(wǎng)介紹：kkFileView為文件文檔在線預(yù)覽解決方案，該項(xiàng)目使用流行的spring boot搭建，易上手和部署，基本支持主流辦公文檔的在線預(yù)覽，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,圖片,視頻,音頻等等。

前一文章《開(kāi)源對(duì)象存儲(chǔ)系統(tǒng)MinIo部署配置與SpringBoot客戶(hù)端整合訪問(wèn)》已經(jīng)介紹MinIo部署和SpringBoot的基本整合。
本文介紹kkFileView的部署，并可以預(yù)覽MiniIo存儲(chǔ)的文檔。
kkFileView沒(méi)有權(quán)限認(rèn)證功能，本文使用Spring Gateway為kkFileView增加登錄才能預(yù)覽文檔的功能。

1、kkfileview下載部署

官網(wǎng)：https://kkview.cn
碼云源碼：https://gitee.com/kekingcn/file-online-preview

1.1、安裝包部署運(yùn)行

1.1.1、物理機(jī)或虛擬機(jī)上運(yùn)行

自v4.1.0 版本開(kāi)始 kkFileView 不再免費(fèi)提供 Windows 和 Linux 的發(fā)行安裝包了，可以自己基于源碼編譯打包運(yùn)行。
本文測(cè)試用的4.0.0版本來(lái)自文章:https://blog.csdn.net/qq_37284798/article/details/129377354提供。
解壓kkFileView-x.x.x文件（Windows用.zip包，Linux/MacOS用.tar.gz包）
打開(kāi)解壓后文件夾的bin目錄，運(yùn)行startup腳本（Windows下以管理員身份運(yùn)行startup.bat，Linux以root用戶(hù)運(yùn)行startup.sh）
瀏覽器訪問(wèn)本機(jī)8012端口 http://127.0.0.1:8012 即可看到項(xiàng)目演示用首頁(yè)

1.1.2、Docker容器環(huán)境環(huán)境運(yùn)行

使用docker部署

# 拉取鏡像 
# docker中央倉(cāng)庫(kù)https://hub.docker.com/r/keking/kkfileview，倉(cāng)庫(kù)最新版本只有4.1.0版本；Gitee源碼最新版本為4.3.0
docker pull keking/kkfileview:4.1.0

# 運(yùn)行
docker run -it -p 8012:8012 keking/kkfileview:4.1.0

瀏覽器訪問(wèn)容器8012端口 http://127.0.0.1:8012 即可看到項(xiàng)目演示用首頁(yè)

使用docker-compose部署

# 配置文件docker-compose.yml
version: '3'
services:
  web:
    restart: always
    container_name: kkfileview
    image: keking/kkfileview:4.1.0
    ports:
      - "8012:8012"
    privileged: true
    volumes:
      - "./config/application.properties:/opt/kkFileView-4.1.0/config/application.properties"
      - "./log:/opt/kkFileView-4.1.0/log"
      
## 啟動(dòng)命令
docker-compose up -d
## 關(guān)閉
docker-compose down

kkfileview官方參考配置application.properties內(nèi)容

#######################################不可動(dòng)態(tài)配置，需要重啟生效#######################################
server.port = ${KK_SERVER_PORT:8012}
#server.servlet.context-path= ${KK_CONTEXT_PATH:/}
server.servlet.context-path= /preview
server.servlet.encoding.charset = utf-8
#文件上傳限制
spring.servlet.multipart.max-file-size=500MB
spring.servlet.multipart.max-request-size=500MB
## Freemarker 配置
spring.freemarker.template-loader-path = classpath:/web/
spring.freemarker.cache = false
spring.freemarker.charset = UTF-8
spring.freemarker.check-template-location = true
spring.freemarker.content-type = text/html
spring.freemarker.expose-request-attributes = true
spring.freemarker.expose-session-attributes = true
spring.freemarker.request-context-attribute = request
spring.freemarker.suffix = .ftl

# office-plugin
## office轉(zhuǎn)換服務(wù)的進(jìn)程數(shù)，默認(rèn)開(kāi)啟兩個(gè)進(jìn)程
office.plugin.server.ports = 2001,2002
## office 轉(zhuǎn)換服務(wù) task 超時(shí)時(shí)間，默認(rèn)五分鐘
office.plugin.task.timeout = 5m

#預(yù)覽生成資源路徑（默認(rèn)為打包根路徑下的file目錄下）
#file.dir = D:\\kkFileview\\
file.dir = ${KK_FILE_DIR:default}

#允許預(yù)覽的本地文件夾 默認(rèn)不允許任何本地文件被預(yù)覽
#file.dir = D:\\kkFileview\\
local.preview.dir = ${KK_LOCAL_PREVIEW_DIR:default}


#openoffice home路徑
#office.home = C:\\Program Files (x86)\\OpenOffice 4
office.home = ${KK_OFFICE_HOME:default}

#緩存實(shí)現(xiàn)類(lèi)型，不配默認(rèn)為內(nèi)嵌RocksDB(type = default)實(shí)現(xiàn)，可配置為redis(type = redis)實(shí)現(xiàn)（需要配置spring.redisson.address等參數(shù)）和 JDK 內(nèi)置對(duì)象實(shí)現(xiàn)（type = jdk）,
cache.type =  ${KK_CACHE_TYPE:jdk}
#redis連接，只有當(dāng)cache.type = redis時(shí)才有用
spring.redisson.address = ${KK_SPRING_REDISSON_ADDRESS:127.0.0.1:6379}
spring.redisson.password = ${KK_SPRING_REDISSON_PASSWORD:}
#緩存是否自動(dòng)清理 true 為開(kāi)啟，注釋掉或其他值都為關(guān)閉
cache.clean.enabled = ${KK_CACHE_CLEAN_ENABLED:true}
#緩存自動(dòng)清理時(shí)間，cache.clean.enabled = true時(shí)才有用，cron表達(dá)式，基于Quartz cron
cache.clean.cron = ${KK_CACHE_CLEAN_CRON:0 0 3 * * ?}

#######################################可在運(yùn)行時(shí)動(dòng)態(tài)配置#######################################
#提供預(yù)覽服務(wù)的地址，默認(rèn)從請(qǐng)求url讀，如果使用nginx等反向代理，需要手動(dòng)設(shè)置
#base.url = https://file.keking.cn
#base.url = ${KK_BASE_URL:default}
base.url = http://127.0.0.1:8012/preview

#信任站點(diǎn)，多個(gè)用','隔開(kāi)，設(shè)置了之后，會(huì)限制只能預(yù)覽來(lái)自信任站點(diǎn)列表的文件，默認(rèn)不限制
#trust.host = file.keking.cn,kkfileview.keking.cn
trust.host = ${KK_TRUST_HOST:default}

#是否啟用緩存
cache.enabled = ${KK_CACHE_ENABLED:true}

#文本類(lèi)型，默認(rèn)如下，可自定義添加
simText = ${KK_SIMTEXT:txt,html,htm,asp,jsp,xml,json,properties,md,gitignore,log,java,py,c,cpp,sql,sh,bat,m,bas,prg,cmd}
#多媒體類(lèi)型，默認(rèn)如下，可自定義添加
media = ${KK_MEDIA:mp3,wav,mp4,flv}
#是否開(kāi)啟多媒體類(lèi)型轉(zhuǎn)視頻格式轉(zhuǎn)換,目前可轉(zhuǎn)換視頻格式有：avi,mov,wmv,3gp,rm
#請(qǐng)謹(jǐn)慎開(kāi)啟此功能，建議異步調(diào)用添加到處理隊(duì)列，并且增加任務(wù)隊(duì)列處理線程，防止視頻轉(zhuǎn)換占用完線程資源，轉(zhuǎn)換比較耗費(fèi)時(shí)間,并且控制了只能串行處理轉(zhuǎn)換任務(wù)
media.convert.disable = ${KK_MEDIA_CONVERT_DISABLE:false}
#支持轉(zhuǎn)換的視頻類(lèi)型
convertMedias = ${KK_CONVERTMEDIAS:avi,mov,wmv,mkv,3gp,rm}
#office類(lèi)型文檔(word ppt)樣式，默認(rèn)為圖片(image)，可配置為pdf（預(yù)覽時(shí)也有按鈕切換）
office.preview.type = ${KK_OFFICE_PREVIEW_TYPE:image}
#是否關(guān)閉office預(yù)覽切換開(kāi)關(guān)，默認(rèn)為false，可配置為true關(guān)閉
office.preview.switch.disabled = ${KK_OFFICE_PREVIEW_SWITCH_DISABLED:false}

#是否禁止演示模式
pdf.presentationMode.disable = ${KK_PDF_PRESENTATION_MODE_DISABLE:true}
#是否禁止打開(kāi)文件
pdf.openFile.disable = ${KK_PDF_OPEN_FILE_DISABLE:true}
#是否禁止打印轉(zhuǎn)換生成的pdf文件
pdf.print.disable = ${KK_PDF_PRINT_DISABLE:true}
#是否禁止下載轉(zhuǎn)換生成的pdf文件
pdf.download.disable = ${KK_PDF_DOWNLOAD_DISABLE:true}
#是否禁止bookmark
pdf.bookmark.disable = ${KK_PDF_BOOKMARK_DISABLE:true}
#是否禁用首頁(yè)文件上傳
file.upload.disable = ${KK_FILE_UPLOAD_ENABLED:false}

#預(yù)覽源為FTP時(shí) FTP用戶(hù)名，可在ftp url后面加參數(shù)ftp.username=ftpuser指定，不指定默認(rèn)用配置的
ftp.username = ${KK_FTP_USERNAME:ftpuser}
#預(yù)覽源為FTP時(shí) FTP密碼，可在ftp url后面加參數(shù)ftp.password=123456指定，不指定默認(rèn)用配置的
ftp.password = ${KK_FTP_PASSWORD:123456}
#預(yù)覽源為FTP時(shí), FTP連接默認(rèn)ControlEncoding(根據(jù)FTP服務(wù)器操作系統(tǒng)選擇，Linux一般為UTF-8，Windows一般為GBK)，可在ftp url后面加參數(shù)ftp.control.encoding=UTF-8指定，不指定默認(rèn)用配置的
ftp.control.encoding = ${KK_FTP_CONTROL_ENCODING:UTF-8}

#水印內(nèi)容
#例：watermark.txt = ${WATERMARK_TXT:凱京科技內(nèi)部文件，嚴(yán)禁外泄}
#如需取消水印，內(nèi)容設(shè)置為空即可，例：watermark.txt = ${WATERMARK_TXT:}
watermark.txt = ${WATERMARK_TXT:}
#水印x軸間隔
watermark.x.space = ${WATERMARK_X_SPACE:10}
#水印y軸間隔
watermark.y.space = ${WATERMARK_Y_SPACE:10}
#水印字體
watermark.font = ${WATERMARK_FONT:微軟雅黑}
#水印字體大小
watermark.fontsize = ${WATERMARK_FONTSIZE:18px}
#水印字體顏色
watermark.color = ${WATERMARK_COLOR:black}
#水印透明度，要求設(shè)置在大于等于0.005，小于1
watermark.alpha = ${WATERMARK_ALPHA:0.2}
#水印寬度
watermark.width = ${WATERMARK_WIDTH:180}
#水印高度
watermark.height = ${WATERMARK_HEIGHT:80}
#水印傾斜度數(shù)，要求設(shè)置在大于等于0，小于90
watermark.angle = ${WATERMARK_ANGLE:10}

#Tif類(lèi)型圖片瀏覽模式：tif（利用前端js插件瀏覽）；jpg（轉(zhuǎn)換為jpg后前端顯示）；pdf（轉(zhuǎn)換為pdf后顯示，便于打印）
tif.preview.type = ${KK_TIF_PREVIEW_TYPE:tif}

1.2、接入說(shuō)明

參考自官方Demo接入說(shuō)明：http://127.0.0.1:8012/index
如果你的項(xiàng)目需要接入文件預(yù)覽項(xiàng)目，達(dá)到對(duì)docx、excel、ppt、jpg等文件的預(yù)覽效果，那么通過(guò)在你的項(xiàng)目中加入下面的代碼就可以成功實(shí)現(xiàn)：

var url = 'http://127.0.0.1:8080/file/test.txt'; //要預(yù)覽文件的訪問(wèn)地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url)));

新增多圖片同時(shí)預(yù)覽功能，接口如下：

var fileUrl =url1+'|'+url2;//多url使用'|'字符隔開(kāi)
window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(base64Encode(fileUrl)));

2、使用Spring Gateway增加登錄認(rèn)證

2.1、網(wǎng)關(guān)實(shí)現(xiàn)代碼

Spring Gateway使用前文的例子：Spring Cloud 2022.x版本使用gateway和nacos實(shí)現(xiàn)動(dòng)態(tài)路由和負(fù)載均衡。
增加一個(gè)全局過(guò)濾器類(lèi)FileViewFilter.java，檢查用戶(hù)登錄cookie是否存在。

package com.penngo.gateway.filter;
import org.springframework.cloud.gateway.filter.GatewayFilterChain;
import org.springframework.cloud.gateway.filter.GlobalFilter;
import org.springframework.core.Ordered;
import org.springframework.core.io.buffer.DataBuffer;
import org.springframework.http.HttpCookie;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.util.MultiValueMap;
import org.springframework.web.server.ServerWebExchange;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
import java.util.List;

@Component
public class FileViewFilter implements GlobalFilter, Ordered {
    @Override
    public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
        try{
            ServerHttpRequest request = exchange.getRequest();
            HttpHeaders headers = request.getHeaders();
            ServerHttpResponse response = exchange.getResponse();
            MultiValueMap<String, HttpCookie> cookieMap = request.getCookies();
            String currentUrl = request.getURI().getPath();
            if(currentUrl.startsWith("/preview")){
                boolean isForbid = true;
                if(cookieMap != null ){
                    List<HttpCookie> cookies = cookieMap.get("token");
                    if(cookies != null){
                        for(HttpCookie cookie:cookies){
                            if(cookie.getName().equals("token") && cookie.getValue().equals("test123456")){
                                isForbid = false;
                            }
                        }
                    }
                }
                if(isForbid == false){
                    return chain.filter(exchange);
                }
                else{
                    DataBuffer dataBuffer = response.bufferFactory().wrap("No permission, please login first!".getBytes());
                    response.setStatusCode(HttpStatus.OK);
                    return response.writeWith(Flux.just(dataBuffer));
                }
            }
        }
        catch(Exception e){
            e.printStackTrace();
        }
        return chain.filter(exchange);
    }
    @Override
    public int getOrder() {
        return -200;
    }
}

Nacos配置：

spring:
  cloud:
    gateway:
      routes:
        - id: previewid
          uri: http://192.168.245.139:8012/
          predicates:
            - Path=/preview/**
        - id: fileid
          uri: http://127.0.0.1:8080/
          predicates:
            - Path=/index/**
          filters:
            - StripPrefix=1

2.2、文件服務(wù)實(shí)現(xiàn)代碼

文檔預(yù)覽服務(wù)基于開(kāi)源對(duì)象存儲(chǔ)系統(tǒng)minio部署配置與SpringBoot客戶(hù)端整合訪問(wèn)上修改。
pom.xml增加依賴(lài)包：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

application.yml增加thymeleaf配置：

server:
  port: 8080
  servlet:
    encoding:
      force: true
      charset: UTF-8
      enabled: true
  tomcat:
    uri-encoding: UTF-8
  thymeleaf:
    mode: HTML
    cache: false
    encoding: UTF-8

FileController增加方法：

package com.penngo.example.controlleer;

import com.penngo.example.component.MinioUtils;
import jakarta.annotation.Resource;
import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.io.File;
import java.io.FileInputStream;
import java.net.URLEncoder;
import java.util.Base64;
import java.util.HashMap;
import java.util.Map;

@Controller
public class FileController {

    @Resource
    private MinioUtils minioUtils;


    @GetMapping("/fileListView")
    public String fileListView(HttpServletRequest request, Model model){
        Map<String, String> files =  minioUtils.getFileList();
        StringBuffer sff = new StringBuffer();
        Base64.Encoder encoder = Base64.getEncoder();
        Map<String, String> fileUrls =  new HashMap<>();
        files.forEach((k,v)->{
            String url = encoder.encodeToString(v.getBytes());
            url = "http://127.0.0.1:9090/preview/onlinePreview?url=" + URLEncoder.encode(url);
            fileUrls.put(k, url);
        });
        model.addAttribute("files",fileUrls);
        return "/index/fileList";
    }
    @RequestMapping("/login")
    public String login(HttpServletRequest request) {
        return "/index/login";
    }

    @RequestMapping( value ="/save", method = RequestMethod.POST)
    public String save(HttpServletRequest request, HttpServletResponse response, Model model, @RequestParam String user, @RequestParam String passwd){
        model.addAttribute("stat", "登錄失敗");
        if(user.equals("admin") && passwd.equals("123456")){
            model.addAttribute("stat", "登錄成功");
            Cookie[] Cookies =  request.getCookies();
            Cookie cookie = new Cookie("token", "test123456");
            cookie.setPath("/");
            cookie.setMaxAge(60 * 60 * 24);
            response.addCookie(cookie);
        }
        return "/index/login";
    }

    @RequestMapping( value ="/logout", method = RequestMethod.GET)
    public String logout(HttpServletRequest request, HttpServletResponse response, Model model){
        Map<String, String> data = new HashMap<>();
        model.addAttribute("stat", "退出成功");
        Cookie cookie = new Cookie("token", "");
        cookie.setPath("/");
        cookie.setMaxAge(0);
        response.addCookie(cookie);
        return "/index/logout";
    }
}

resources\templates\index\login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span th:text="${stat}"></span>
<form action="./save" method="post">
    用戶(hù)名: <input type="text" name="user" value=""><br>
    密 碼: <input type="text" name="passwd" value=""><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

模板文件
fileList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table >
    <tr th:each="file,url:${files}">
        <td style="white-space:nowrap;" th:text="${file.key}"></td>
        <td ><a target="_blank" th:href="${file.value}"><span th:text="${file.value}"></span></a></td>
    </tr>
</table>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span th:text="${stat}"></span>
<form action="./save" method="post">
    用戶(hù)名: <input type="text" name="user" value=""><br>
    密 碼: <input type="text" name="passwd" value=""><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

2.3、Demo運(yùn)行效果

文件瀏覽列表，例子只放了一個(gè)office文檔
訪問(wèn)文件列表

未登錄前訪問(wèn)文檔，提示“沒(méi)有權(quán)限，請(qǐng)先登錄”

登錄

登錄后再訪問(wèn)文檔地址，已能成功預(yù)覽docx文檔
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-702028.html

到了這里，關(guān)于使用Spring Gateway為對(duì)象存儲(chǔ)系統(tǒng)MinIo和kkFileView文檔預(yù)覽增加登錄驗(yàn)證的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！