使用kkfileview实现web在线预览

使用kkfileview实现web在线预览文件

场景:一个业务场景是,针对单据上传附件(放到FTP),后续通过web实现对附件的在线预览打印

使用工具 :kkFileView

官网地址:https://kkfileview.keking.cn/zh-cn/index.html

码云地址:https://gitee.com/kekingcn/file-online-preview

阅读本文需要了解docke的基础指令

部署相关

官网地址有详细的部署,我这边采用的是docker

步骤如下:

一、拉取镜像,获取配置文件
# 拉取kkfileView
$ docker pull keking/kkfileview

# 启动keking/kkfileview
$ docker run -it -d  -p 8012:8012 --name myfileview keking/kkfileview

# 创建容器配置文件的挂载目录
$ mkdir -p /home/fileView/conf

# 可以进入容器内部查看这个文件
$ docker exec -it  myfileview bash

# 通过拷贝容器内部到本地 (内部地址 外部地址)
$ docker cp myfileview:/opt/kkFileView-3.5.1/config/application.properties  /home/fileView/conf

# 强行停止并且删除容器
$ docker container rm -f myfileview
二、根据需要修改application.properties
#  我这里的需求是默认用pdf打开,以及把服务通过nginx反向代理 对application.properties的部分属性做了修改
# 修改了的配置
base.url = http://ip/preview
server.servlet.context-path= /preview

# 修改了默认打开为pdf
office.preview.type = ${KK_OFFICE_PREVIEW_TYPE:pdf}
三、在Nginx中添加如下配置
location /preview{
    proxy_pass http://ip:8012;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade"; 
    proxy_set_header Host $host:$server_port;  
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
} 
四、后续操作
# 重启Nginx 到对应的sbin目录下
$ ./nginx -s reload

# docker启动kkfileview
# 指定挂载目录
$ docker run -it -d  -p 8012:8012 -v /home/fileview/application.properties:/opt/kkFileView-3.5.1/config/application.properties --name myfileview  keking/kkfileview

# 如果修改配置文件之后
$ docker container restart myfileview

记得ip替换为自己的ip地址。

使用 http://ip/preview 查看是否启动成功。

使用kkfileView进行前台预览

我这边使用的http/https下载流url预览 参考官方文档

 //要预览文件的访问地址 这里应该返回一个文件流
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1';
// 注意指定文件后缀,比如上传的是docx 那么就应该是 xxx.docx 不然会乱码
var previewUrl = originUrl + '&fullfilename=test.txt' 
// 打开预览页面
window.open('http://ip/preview/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是使用 Spring Boot + Vue 实现 KKFileView 与 MinIO 文件预览的具体操作步骤: 1. 首先,需要安装并启动 MinIO,可以从官网下载并安装对应平台的版本。 2. 创建一个新的 MinIO 存储桶,并将需要预览的文件上传到该存储桶中。 3. 使用 Spring Boot 创建一个新的 Web 应用程序,并添加 MinIO 的客户端依赖,如下所示: ```xml <dependency> <groupId>io.minio</groupId> <artifactId>minio</artifactId> <version>6.1.0</version> </dependency> ``` 4. 创建一个 MinIO 客户端实例,并使用该实例获取存储桶中的文件 URL,如下所示: ```java import io.minio.MinioClient; import io.minio.errors.MinioException; public class MinioUtils { private static final String ENDPOINT = "your-minio-endpoint"; private static final String ACCESS_KEY = "your-minio-access-key"; private static final String SECRET_KEY = "your-minio-secret-key"; private static final String BUCKET_NAME = "your-bucket-name"; private static final MinioClient minioClient; static { try { minioClient = new MinioClient(ENDPOINT, ACCESS_KEY, SECRET_KEY); } catch (Exception e) { throw new RuntimeException(e); } } public static String getFileUrl(String fileName) { try { return minioClient.presignedGetObject(BUCKET_NAME, fileName); } catch (Exception e) { throw new RuntimeException(e); } } } ``` 其中,getFileUrl 方法用于获取指定文件在 MinIO 存储桶中的 URL。 5. 使用 Vue 创建一个新的 Web 界面,并引入 KKFileView 的 JavaScript 文件,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件预览</title> <script src="https://cdn.koalaxiezi.com/kkfileview/4.0.6/kkfileview.min.js"></script> <link href="https://cdn.koalaxiezi.com/kkfileview/4.0.6/kkfileview.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> ``` 6. 在 Vue 的 app.js 文件中,使用 Axios 获取 MinIO 存储桶中的文件 URL,并将其传递给 KKFileView 进行预览,如下所示: ```javascript import axios from 'axios' import KKFileView from 'kkfileview' new Vue({ el: '#app', created() { axios.get('/getFileUrl?fileName=test.pdf').then((response) => { KKFileView.open(response.data) }) } }) ``` 其中,getFileUrl 接口用于返回指定文件在 MinIO 存储桶中的 URL,response.data 是从接口返回的 URL。 7. 在 Spring Boot 应用程序中,创建 getFileUrl 接口,用于返回指定文件在 MinIO 存储桶中的 URL,如下所示: ```java import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @RestController public class FileController { @GetMapping("/getFileUrl") public String getFileUrl(@RequestParam String fileName) { return MinioUtils.getFileUrl(fileName); } } ``` 8. 启动 Spring Boot 应用程序和 Vue Web 界面,访问 Vue Web 界面,即可在线预览 MinIO 存储桶中的文件。 需要注意的是,为了保证文件访问的安全性,需要在 MinIO 中设置适当的访问权限,确保只有授权的用户才能访问存储桶中的文件。同时,KKFileView 也提供了一些安全设置,如设置访问密码等,可以进一步加强文件访问的安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值