搜索到
1
篇与
的结果
-
Alist 预览完美解决 Alist+kkfileview一、安装kkFileView官方有docker镜像包文件，可以直接使用docker部署kkFileViewdocker run -d -it \ -p 8012:8012 \ -v /path/to/kkFileView:/opt/kkFileView-4.1.0/file \ --name kkFileView \ --restart unless-stopped \ keking/kkfileview #/path/to/kkFileView为你存放kkFileView预览文件的路径ShellScript打开http://ip:8012即可打开页面，可以搭配nginx实现反向代理，需要的自己实现二、配置Base64编码页面kkFileView支持传入Base64的文件链接进行解析，在http://ip:8012/onlinePreview?url={base64}进行传入，因此我们需要将alist默认的传入路径先进行Base64化后再传给kkFileView1、编写view.html文件使用nginx或者其他Web软件添加一个http静态页面，创建view.html文件，写入下列内容：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KKFileViewer</title> </head> <body> <script src="/base64.js" type="application/javascript"></script> <script> function getQueryParamValue(name) { const searchParams = new URLSearchParams(window.location.search); return searchParams.get(name); } let url = decodeURIComponent(getQueryParamValue("url")); if (url === "null") { console.log("url的参数为空!") } else { const alistRegex = /(\?|&)alist_ts=\d+/; if (alistRegex.test(url)) { url = url.replace(alistRegex, ''); } url = encodeURIComponent(url); let e_url='https://kk.example.com/onlinePreview?url='+encodeURIComponent(BASE64.encode(url)); console.log(e_url); window.open('https://kk.example.com/onlinePreview?url='+encodeURIComponent(BASE64.encode(url)),'_self'); } </script> </body> </html>其中，将https://kk.example.com替换成你的kkFileView地址2、添加base64.js文件在gitee上可以下载支持中文编码的base64.js文件点我打开，将base64.js放到view.html同路径下，或者修改view.html里面的JavaScript引用路径base64.js下载3、测试view.html是否可以访问打开你的view.html网站，打开F12控制台页面，看看是否正常显示三、配置alist在设置->预览->外部预览添加上下列代码{ "doc,docx,xls,xlsx,ppt,pptx": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "pdf": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "csv,tsv,dotm,xlt,xltm,dot,dotx,xlam,xla,pages,wps,dps,et,ett,wpt,odt,ods,ots,odp,otp,six,ott,fodt,fods": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "vsd,vsdx,wmf,emf,eps,ofd,rtf,xmind,bpmn,eml,drawio,dcm": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "epub": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "obj,3ds,stl,ply,gltf,glb,off,3dm,fbx,dae,wrl,3mf,ifc,brep,step,iges,fcstd,bim": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "dwg,dxf,dwf,iges,igs,dwt,dng,ifc,dwfx,stl,cf2,plt": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_ durl" }, "zip,rar,jar,tar,gzip,gz,7z": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "psd,tif,tiff,tga,svg": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" }, "drawio": { "使用kkFileView预览(转码需要时间，请耐心等候)":"https://example.com/view.html?url=$e_durl" } }其中，https://example.com/view.html为你刚刚创建的view.html网页，alist先将下载地址传给view.html进行base64编码后在传给kkFileView这样就可以实现在线预览了alist配合onlyoffice 实现在线预览一、安装onlyoffice我是采用docker安装，采用的版本是7.2， aarch64 可以支持，端口号为 18081docker run --restart=always --name onlyoffice \ -p 18081:80 \ -e JWT_ENABLED=false \ -v /app/onlyoffice/DocumentServer/logs:/var/log/onlyoffice \ -v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data \ -v /app/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice \ -v /app/onlyoffice/DocumentServer/db:/var/lib/postgresql \ onlyoffice/documentserver:7.2二、增加view.html文件创建文件夹mkdir -p /opt/onlyofficevim /opt/onlyoffice/view.html注意：配置文件中的主机IP需要修改为自己机器的IP<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OnlyOffice Viewer</title> </head> <body> <div id="placeholder"></div> <script type="text/javascript" src="http://主机IP:18081/web-apps/apps/api/documents/api.js"></script> <script> function getQueryParamValue(name) { const searchParams = new URLSearchParams(window.location.search); return searchParams.get(name); } const url = decodeURIComponent(getQueryParamValue("src")); const fileName = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('?') != -1 ? url.lastIndexOf('?') : url.length); const fileExtension = fileName.split('.').pop(); const docEditor = new DocsAPI.DocEditor("placeholder", { "document": { "fileType": fileExtension, "permissions": { "edit": false, "comment": true, "download": true, "print": true, "fillForms": true, }, "title": fileName, "url": url, }, "editorConfig": { "lang": "zh-CN", "mode": "view", }, "height": "1080px", "type": "desktop", }); </script> </body> </html>三、安装nginx，并增加conf配置文件sudo apt updatesudo apt install -y nginx增加conf配置文件vim /etc/nginx/conf.d/onlyoffice.confserver { listen 18082; server_name localhost; location / { root /opt/onlyoffice; #这里修改为自己的view.html的目录 index index.html index.htm; } }重启nginxsystemctl restart nginx 注意:此处如果重启失败，则是因为80端口被占用，需要查找占用端口进程，需要干掉查看nginx状态systemctl status nginx 四、alist预览配置增加配置文件里面的主机IP，需要修改为安装onlyoffice 的ip{ "doc,docx,xls,xlsx,ppt,pptx": { "onlyoffice":"http://主机IP:18082/view.html?src=$e_url", "Microsoft":"https://view.officeapps.live.com/op/view.aspx?src=$e_url", "Google":"https://docs.google.com/gview?url=$e_url&embedded=true" }, "pdf": { "onlyoffice":"http://主机IP:18082/view.html?src=$e_url", "PDF.js":"https://alist-org.github.io/pdf.js/web/viewer.html?file=$e_url" }, "epub": { "EPUB.js":"https://alist-org.github.io/static/epub.js/viewer.html?url=$e_url" } }
