首页/文章/javascript

开源文档预览项目 kkFileView

2024-05-15
11814 分钟
...

kkFileView 是一款文件文档在线预览解决方案,采用流行的 Spring Boot 框架构建,易于上手和部署。

该项目基本支持主流办公文档的在线预览,包括但不限于 doc、docx、xls、xlsx、ppt、pptx、pdf、txt、zip、rar,以及图片、视频、音频等格式。

  • 拉取镜像:

docker pull keking/kkfileview:4.1.0


wget https://kkview.cn/resource/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar
  • 运行容器
docker run -it -p 8012:8012 keking/kkfileview:4.1.0

浏览器访问容器 8012 端口 http://127.0.0.1:8012 即可看到项目演示用首页。

上传一个文件之后,点击预览,即可查看该文件预览效果。

项目内需要预览文件时,只需要调用浏览器打开本项目的预览接口,并传入须要预览文件的 url ,示例如下:

  1. 引入 js 文件
<script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
  1. Js 代码
window.open('http://127.0.0.1:8012/onlinePreview?url='+ encodeURIComponent( Base64.encode(url) ) );

本节我们介绍如何使用 Mac 电脑本地调试 ,以及根据配置按照 windows/Linux 打对应的部署包。

从 Github 上下载 kkFileView :

git clone git@github.com:kekingcn/kkFileView.git

kkFileView 强依赖两点:

  1. Java 1.8+
  2. LibreOffice 或 OpenOffice ( Windows下已内置,CentOS 或 Ubuntu 下会自动下载安装,MacOS 下需要自行安装)

所以 Mac 本地调试需要先安装 LibreOffice ,进入 LibreOffice 首页,下载对应 Mac 版本即可。

当我们通过 IDEA 打开 ,进入 Server 模块,执行 ServerMain 类 :

启动日志如下:

从日志我们看到:kkFileView 会启动两个 LibreOffice 进程,每个进程有独立的端口。

当我们执行 maven 的 package 命令, 根据配置 windows/Linux 打对应的部署包。

我们将打包好的 kkFileView Linux 部署包,上传到部署目录,分别执行:


tar -zxvf kkFileView-4.4.0-SNAPSHOT.tar.gz


cd bin


./startup.sh

备注: Linux 环境首次启动会自动安装 LibreOffice 默认安装 7.5 版本。

我们也可以手工安装 LibreOffice。


cd /home
tar -zxvf LibreOffice_7.5.3.2_Linux_x86-64_rpm.tar.gz
cd LibreOffice_7.5.3.2_Linux_x86-64_rpm/RPMS/
yum -y localinstall *.rpm

手工安装完成后,可以通过如下的命令验证是否正确:

libreoffice7.5 --version

启动 kkFileView 并不意味着配置的结束,因为还需要最后一步:安装字体

1、下载字体

wget http:

2、上传到 /usr/share/fonts , 并解压缩

unzip fonts.zip

3、刷新字体索引

mkfontscale
mkfontdir
fc-cache

当我们在本地调试或者 Linux 服务器执行预览效果时,我们发现 PPT 文档文件会转换成图片的格式,比如下图:

kkFileView 本质是将文档文件转换为特定的展示文件,是一个小型的转码系统。而且转码后的文件存储都是单机模式,假如需要分布式部署,可能还是会有性能瓶颈。

最后,kkFileView 相关安装包,也可以关注勇哥的公众号:勇哥Java实战,回复“kk” , 即可获取 。


如果我的文章对你有所帮助,还请帮忙点赞、在看、转发一下,你的支持会激励我输出更高质量的文章,非常感谢!

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
javascript2026-02-24
navigator.sendBeacon全指南
在前端开发中,埋点系统是必不可少的一环。我们经常需要在用户 关闭页面 、 刷新 或 跳转路由 时,向服务器发送最后一条统计数据(比如用户停留时长、页面跳出率)。 但这看似简单的需求,在实现时却危机四伏:请求发不出去?页面跳转卡顿?今天我们就来聊聊这个问题的终极解决方案 —— 。 一、 痛点与传统方案的挣扎 场景还原 当用户点击关闭按钮时,浏览器会触发生命周期事件( 或 )。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求,浏览...
学习
javascript2025-11-02
理解浏览器事件系统,从用户点击到事件对象的完整旅程
深入理解浏览器事件系统:从用户点击到事件对象的完整旅程 “当我点击页面按钮时,背后发生了什么?为什么回调函数能收到一个包含丰富信息的event对象?今天,让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象 作为前端开发者,我们每天都在写这样的代码: 这段代码如此熟悉,以至于我们很少停下来思考:​ ​这个 对象到底从哪里来?它为什么能知道点击的精确坐标?为什么能识别是哪个元素被点击了?​ ​ 更神奇的是,当我们手动创建事件时:...
学习
javascript2025-10-01
实现大文件上传全流程详解
在日常开发中,大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件,直接上传不仅容易超时,还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案,支持分片上传、断点续传、秒传和手动中。 一、先看效果:我们要实现什么? 先上核心功能清单,确保大家明确目标,知道我们要解决哪些实际问题: 大文件分片上传 :将文件切成固定大小的小片段分批上传,避免单次请求超时 秒传 :服务器已存在完整文件时,直接返...
学习
javascript2025-09-18
JavaScript 的多线程能力:Worker
如果你写过一些计算量稍大的 JavaScript 代码,比如图像处理、大量数据排序或者复杂的算法,你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应,动画也停了,就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript,又要负责渲染页面、响应用户操作,一旦它被繁重的计算任务占满,就无暇顾及其他,用户体验便直线下降。 这个问题的根源,正是“主线程是单线程的”。那么,如何解决呢? 答案很简单:把这...
学习面试
javascript2025-09-15
一张 8K 海报差点把首屏拖垮
你给后台管理系统加了一个「企业风采」模块,运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s,LCP 红得发紫。 老板一句「能不能像朋友圈那样滑到哪看到哪?」——于是你把懒加载重新翻出来折腾了一轮。 解决方案:三条技术路线,你全踩了一遍 1\. 最偷懒:原生 一行代码就能跑,浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖,IE 全军覆没。 必须写死 ,否则 CLS 会抖成 PPT。 适用场景...
学习
javascript2025-09-10
🚀 Web Worker让你的应用丝滑
🌟 引言 在日常的前端开发中,你是否遇到过这样的困扰: 大数据处理时页面卡死 :处理几万条数据时,页面直接卡成PPT,用户点击毫无反应 复杂计算阻塞UI :图片处理、数据分析等计算密集型任务让整个应用假死 文件上传/下载卡顿 :大文件操作时,其他功能完全无法使用 实时数据处理性能差 :WebSocket接收大量数据时,页面渲染严重滞后 今天分享6个Web Worker的核心技巧,让你的应用告别卡顿,用户体验丝滑如德芙! 💡 核心技巧...
学习

评论

请登录后发表评论

去登录
加载评论中...