kkFileView + Vue + MinIO 实现文件的在线预览

原创于 2022-06-23 00:01:27 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

中间件专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何下载并使用kkFileView进行本地文件预览，特别是PDF文件。通过提供一个JavaScript函数`previewing(url)`来处理点击事件，将MinIO生成的文件地址转换为Base64编码后，打开预览窗口。预览时需要注意，非PDF格式的文件可能会出现格式错乱，且首次加载速度可能较慢。建议仅用于PDF预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 下载kkFileView

下载链接：https://download.csdn.net/download/wanzijy/85643426

启动：双击下图中的文件即可启动

2. 给按钮加上点击事件

注意：

本次是直接在本地使用，所以下面的IP是“127.0.0.1”
8012是kkFileView的端口
url是MinIO给文件生成的地址

export function previewing(url) {
    if(url == null || url.length == 0) {
        console.log('该文件链接为空，请刷新后再试');
        return;
    }
    let Base64 = require('js-base64').Base64
    window.open('http://127.0.0.1:8012/onlinePreview?url=' + Base64.encode(url));
}