kkFileView文件在线预览测试

1,621 阅读1分钟

1.kkFileView下载到本地使用idea打开并启动服务

启动报错首先安装libreoffice套件windows版本地址

https://download.documentfoundation.org/libreoffice/stable/7.5.4/win/x86_64/LibreOffice_7.5.4_Win_x86-64.msi

安装完毕之后重启服务器

image.png

2.测试url路径访问

前端代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
</head>
<body>
<div>
    <button id="onlineView">查看附件</button>
</div>
</body>
<script>
    window.onload = function () {
        let btn = document.getElementById("onlineView");
        btn.onclick = function () {
            let previewUrl = 'http://114.132.210.77:9000/ruoyi/2023/07/01/c8ae5dae8dd94bcb8d0bb09114a576c3.jpeg'; //要预览文件的访问地址采用的minio
            window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));
        }

    }
</script>
</html>

2.1 显示效果截图

image.png

3.测试文件流下载后进行预览

前端代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
</head>
<body>
<div>
    <button id="onlineView">查看附件</button>
</div>
</body>
<script>
    window.onload = function () {
        let btn = document.getElementById("onlineView");
        btn.onclick = function () {
            let originUrl = "http://127.0.0.1:8081/filedownload?fileId=c3394d5a-336a-4270-b99d-5f7479655276"; //要预览文件的访问地址
            let previewUrl = originUrl + '&fullfilename=deploy.pdf'
            window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));
        }

    }
</script>
</html>

3.1 代码

见评论gitee地址

4.linux系统部署

将源码包进行package,然后放到服务器上面解压

5.安装libreoffice7

下载链接

https://download.documentfoundation.org/libreoffice/stable/7.4.7/rpm/x86_64/LibreOffice_7.4.7_Linux_x86-64_rpm.tar.gz

安装

tar -zxvf LibreOffice_7.4.7_Linux_x86-64_rpm.tar.gz
cd LibreOffice_7.4.7_Linux_x86-64_rpm/RPMS
yum -y localinstall *.rpm
yum install -y libreoffice-headless

回到kkFileView的bin目录执行./install.sh

6.使用./startup.sh 启动kkFileView

启动标志查看端口8012 2001 2002的端口启动状态(netstat -nultp)

image.png

7.线上部署前端测试代码

使用nginx进行配置静态文件访问

配置如下

server {
          listen       99;
          server_name  localhost;
          charset utf-8;
          location / {
              root /home/kkFileView-test/html;
              index index.html;
          }
         error_page   500 502 503 504  /50x.html;
         location = /50x.html {
              root  /home/kkFileView-test/html;
         }
}
  1. 后台部署代码
nohup java -jar springboot-download-0.0.1-SNAPSHOT.jar --server.port=8099 > test.log &
  1. 线上测试截图

url测试

image.png

文件流

image.png

备注 采用postman测试上传一个pdf文件上去,然后在test2中修改fileId的值进行测试