请上传宽度大于 1200px,高度大于 164px 的封面图片
    调整图片尺寸与位置
    滚轮可以放大缩小图片尺寸,按住图片拖动可调整位置,多余的会自动被裁剪掉
取消
996433090(uid:79919)
职业资格认证:尚未取得认证
kkFileView 开源在线预览 支持pc端和移动端
一、前言 网页端一般会遇到各种文件,比如:txt、doc、docx、ofd、pdf、xml、xls、xlsx、ppt、pptx、zip、png、jpg等等。 有时候我们不想要把文件下载下来,而是想在线打开文件预览 ,这个时候如果每一种格式都需要我们去写代码造轮子去实现预览功能就太复杂了,并且自己实现的话会有很多兼容性问题。 这个时候 kkFileView 的出现就解决了我们的问题。 二、kkFileView介绍 kkFileView 为文件文档在线预览解决方案,该项目使用流行的spring boot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等 三、kkFileView安装   部署指南参考kkFileView - 在线文件预览 下面介绍Windows、Linux、docker三种安装方式。 1.下载Windows或Linux的 v4.0.0 安装包 : 1.1 windows安装包下载 (链接:https://pan.baidu.com/s/1hZCP5jcD5cKd-xCsMHfYxg 提取码:7uwd) 1.2 linux安装包下载 (链接:https://pan.baidu.com/s/1grhyoIQ_Tr2NHyCZPFYDWg 提取码:13hj)   2.Windows上安装: 2.1 下载的 zip 压缩包解压后进入 bin 目录,双击 startup.bat 启动 kkFileView 2.2 30秒后进入 log 目录查看 kkFileView.log 日志,打印【kkFileView 服务启动完成,耗时:26.8350973s,演示页请访问: http://127.0.0.1:8012 】则说明启动成功。   3.Linux上安装(centos为例): 3.1 root用户下将 kkFileView-4.0.0.tar.gz 上传到服务器 ,使用命令 tar -zxvf kkFileView-4.0.0.tar.gz 解压,开放 8012 端口。 3.2 root用户下解压后进入 kkFileView-4.0.0/bin 目录,执行 ./startup.sh 开始安装和启动,安装过程中会下载需要的组件需要输入y 3.3 安装字体。若不安装字体转化出的pdf文件可能会因为缺少字体乱码。 字体下载(链接:http://kkfileview.keking.cn/fonts.zip) 或者 百度云下载(链接:https://pan.baidu.com/s/1VMGERMHAI7W_Ys-MZC_YTQ 提取码:p6hq) 将下载的字体fonts.zip上传到 /usr/share/fonts 目录解压后执行命令 mkfontscale 若 mkfontscale 提示没有命令则先 yum install mkfontscale 安装命令 再分别依次执行 mkfontscale、mkfontdir、fc-cache 命令。   3.4 安装完成后 kkFileView-4.0.0/bin/ 目录下使用命令 ./showlog.sh 查看日志 如果出现: 【kkFileView 服务启动完成,耗时:5.99157928s,演示页请访问: http://127.0.0.1:8012 】,则表示安装启动成功。 3.5 如果日志提示报错信息【找不到office组件,请确认’office.home’配置是否有误 】。 (1)可能是 install.sh 中脚本有问题,尝试将脚本中的: wget https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_deb.tar.gz -cO LibreOffice_7_deb.gz && tar -zxf /tmp/LibreOffice_7_deb.tar.gz && cd /tmp/LibreOffice_7.1.4.2_Linux_x86-deb/RPMS 改为如下: wget https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_deb.tar.gz -cO LibreOffice_7_deb.tar.gz && tar -zxf /tmp/LibreOffice_7_deb.tar.gz && cd /tmp/LibreOffice_7.1.4.2_Linux_x86-64_deb/DEBS 然后重启 kkFileView 看问题是否还存在 (2) 若 install.sh 修改后问题依然存在,则需要下载 LibreOffice 组件安装。 LibreOffice下载 (链接:https://downloadarchive.documentfoundation.org/libreoffice/old/7.1.4.2/rpm/x86_64/) 或者: 百度云下载(链接:https://pan.baidu.com/s/18tLufbFQCOm11R7-U2f0-Q 提取码:0npj)将 LibreOffice_7.1.4.2_Linux_x86-64_rpm.tar.gz 上传服务器,然后解压后进入RPMS目录执行 yum localinstall *.rpm 进行安装。 3.6 如果日志提示报错信息【Caused by: java.lang.IllegalStateException: a process with acceptString ‘socket,host=127.0.0.1,port=2001’ is already running】 (1)用 ps -ef|grep java 命令查询出Java相关运行的进程,然后关闭kkFileView相关的进程, 并查看2001和2002端口的进程并关闭该进程。然后再执行 ./startup.sh 启动并查看日志。 (2)如果是安装在Linux上并且关闭了kkFileView相关的进程以及2001和2002端口,启动日志任 然存在该问题,那么可能是你远程连接服务器的软件导致的这个问题,改用window的cmd, 用ssh连接服务器启动程序尝试。 3.7 如果日志提示报错信息【Caused by: org.artofsolving.jodconverter.office.OfficeException: could not establish connection】,可参考 centos下启动失败:启动office组件失败,请检查office组件是否可用 四、kkFileView的配置和使用 1.修改启动脚本 测试发现如果 kkfileview 安装在 Windows 上预览 txt 文件会乱码,所以需要修改 kkfileview 的 bin 目录下的 startup.bat 脚本。 在最后一行的 java 后添加 -Dfile.encoding=UTF-8 修改后如下: @echo off set "KKFILEVIEW_BIN_FOLDER=%cd%" cd "%KKFILEVIEW_BIN_FOLDER%" echo Using KKFILEVIEW_BIN_FOLDER %KKFILEVIEW_BIN_FOLDER% echo Starting kkFileView... echo Please check log file in ../log/kkFileView.log for more information echo You can get help in our official homesite: https://kkFileView.keking.cn echo If this project is helpful to you, please star it on https://gitee.com/kekingcn/file-online-preview/stargazers java -Dfile.encoding=UTF-8 -Dspring.config.location=..\config\application.properties -jar kkFileView-4.0.0.jar -> ..\log\kkFileView.log   2.关闭演示页面 kkFileView安装启动成功后可以打开 http://安装的ip:8012 (或者本机 http://127.0.0.1:8012) 查看演示页面上传文件以及查看预览效果。 如果项目上线后为了安全要关闭演示页面,可以在修改 kkFileView 安装目录的config文件夹中的 application.properties配置文件,将 file.upload.disable 设置为 true 禁用演示首页的文件上传。 如果你要隐藏演示页面,可以使用 ngnix 将 http://ip:8012 和 http://ip:8012/index 代理到其他页面。 其他配置可根据 官网配置说明 进行配置。   4.kkFileView的使用 kkFileView 的使用有两种方式,一种是通过提供文件的 url 地址来预览;一种是通过提供一个接口,该接口返回文件流来预览。 (参照官网使用说明:使用说明) (1) 通过文件的 url 地址预览 示例 : var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url)); (2) 通过文件接口返回文件流预览 示例: <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script> //假设你项目的后端文件接口是 http://127.0.0.1:8080/filedownload 该接口返回文件流,并且假设该接口接受fileId 参数 var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址,该接口返回文件流 var previewUrl = originUrl + '&fullfilename=test.txt'//fullfilename是必须的,有了该参数kkFileView才知道文件名是什么 //kkFileView 的 onlinePreview 接口就会拿着参数去请求 http://127.0.0.1:8080/filedownload 接口,把文件下载到安装目录的 file/demo 文件夹下,然后转换后把预览界面展示到浏览器。 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl))); 当然,为了文件安全和实效性,你可以在你的接口中加入token或者其他校验参数,满足了才能下载文件。 比如: <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script> var originUrl = 'http://127.0.0.1:8080/filedownload?token=sgdfhkkmlk&time=1659006176&fileID=4564sfd&filename=test.xls'; //要预览文件的访问地址,该接口返回文件流 var previewUrl = originUrl + '&fullfilename=test.xls'//fullfilename是必须的,该参数是kkFileView保存的文件名 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl))); 注意: encodeURIComponent(Base64.encode(previewUrl)) 这里因为编码问题我踩过坑,所以需要注意下当使用 base64 对 previewUrl 进行编码时,如果采用MIME友好型 base64 加密会导致长度每大于 76 就会加入\r 或者 \n 这样的换行控制符,这样再使用encodeURIComponent进行编码就会产生 %0A 这样的字符,就会导致预览不了。解决办法就是base64编码后去除 \r 和 \n 然后再使用 encodeURIComponent 编码,encodeURIComponent 编码后再去除 %0A  
FineReport
FineReport 报表设计器
文档在线预览集成OfficeToHtml(支撑pc端和移动端在线预览)
近期项目中需要用到PC和移动端在线预览的功能,起初下载在线预览插件(试用版)发现无法支持移动端,无法满足项目要求。 集成pdf在线预览时发现了PDF.js (mozilla.github.io) ,可以通过url传参(附件路径)方式,在viewer.html中调用pdf.js代码实现pdf文件PC端和移动端在线预览的功能。 因为业务中上传了word等文件,于是继续寻找可在线预览docx、xlsx、pptx等后缀文件的工具,主要还是解决移动端的问题。 最终在一片博客中(纯前端文档预览,还要支持所有主流格式,有这一篇就足够了_docx-preview.js_喵喵喵更多的博客-CSDN博客),发现了一句话: 意外的收获 到此为止,所有的方案都被pass掉了,非常绝望。无果后,我搭上梯子,疯狂Google,终于找到了一个jquery的开源插件,叫做officeToHtml,出于对开源的尊重,这里提供一下人家的访问链接:OfficeJs | Demos,这个开源项目非常好用,引用它的demo就能直接预览主流格式,但是它是基于JQuery的。 经过半天的测试和代码合并,终于实现了一套简单的demo,具体代码如下: officetohtml.zip (18.48 M) 详细的操作方法如下: 1、将文件解压缩后放入到webroot下。 2、拼接url参数,实现本地文件在线预览 例如本地路径下有个文件 需要对demo.docx在线预览,可以在cpt里面写如下js脚本 //移动端js代码 var file_path="/webroot/officetohtml/pages/files/demo.docx";//文件路径从webroot开始。 var furl = "http://ip:port/webroot/officetohtml/pages/viewer.html?file=" + file_path; var url = encodeURI(furl); FR.doHyperlinkByGet({ url: url, target: '_self' }); //PC端js代码 var file_path="/webroot/officetohtml/pages/files/demo.docx";//文件路径从webroot开始。 var furl = "http://ip:port/webroot/officetohtml/pages/viewer.html?file=" + file_path; window.open(furl);   说明:pages/viewer.html 文件是我参考demos.html为移动端写的,主要用于传参和预览,非系统自带,其他的代码几乎没有变化(除了css的所调整外)。如开源版本有更新,下载新版本后直接覆盖整套系统就可实现完整替代,保证viewer.html文件不变即可,里面涉及到css和js,可以根据实际情况调整。 可在线预览文件类型为:pptx,docx,xlsx,pdf以及各种图片格式。  
个人成就
内容被浏览12,655
加入社区7年261天
返回顶部