Alist文件word、excel及PDF的预览,结合onlyoffice调用报错

xc
xc
2023-12-13 / 1 评论 / 282 阅读 / 正在检测是否收录...

概述

alist网盘程序已经让我基本离不开了,我们平常会在网盘上放置OFFICE文件或PDF文件,网盘本身就自带文件预览功能,只可惜doc,docx,xls,xlsx,ppt,pptx外调的是微软或Google的接口,pdf则是调配的托管在github.io的程序。
看看这结果服务商,国内哪个给力,卡的你没脾气。

alist文档预览最终效果

正文

那我们自己搭建接口来调用总可以吧,刚好我的docker中配置了onlyoffice,网上找了教程,走了不少弯路,但最终还是搞好了,特此记录:

onlyoffice配置:

  1. 你首先要下载安装onlyoffice,这里就不在陈述了,自行搜索;
  2. 配置view.html文件,onlyoffice没有这个文件,需要我们自己建立,我这里给代码,注意:
    src="https://documentserver/web-apps/apps/api/documents/api.js"中的documentserver需要换成你自己安装的地址

    <!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="https://documentserver/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>
  3. 上传到onlyoffice安装的目录下.(理论上,上传在其他地方也可以,但浏览器会有个跨域问题,如果你是小白,最好是放在onlyoffice同网站下),如果你是docker安装的onlyoffice,找不到对应目录或地址,请参考 群晖 NAS Docker中荔枝相册Lychee 如何修改上传文件大小的限制 ,要学会举一反三。我放的地址是

    /volume1/@docker/btrfs/subvolumes/3f6463eb9256a15cd09084b27350636850c3c1d74b98d3aa733a7fe53ed11ad4/var/www/onlyoffice/documentserver-example/welcome

    供参考!

  4. 然后修改alist后台:

    alist后台设置

    注意:网上大多数教程给的是view.html?src=$e_url,我这里修改为了view.html?src=$durl
    否则会报错:
    {cat_tips_error}The "document.fileType" parameter for the config object is invalid. Please correct it. {/cat_tips_error}
    当然,如果看到这个信息,至少证明你的onlyoffice配置view.html文件是正确的。

  5. 如果你后台配置完后,看不到文件预览窗口了,只有文件下载窗口,那说明你后台的写法有误,我就是因为缺少了一个分割号,(,)白白浪费了一上午,还百思不得其解。
  6. 使用感受:onlyoffice往往加载文件会失败,那就多刷新一下,总比默认的那个好多了,打开doc,excel文件都没问题,打开pdf其实也没问题,但对于打开pdf,我其实有更好的推荐,就是pdf.js,打开文件更轻巧,更快。

    pdf.js配置

    pdf.JS其实就是alist默认配置的程序,只是它托管在github.io上,国内很不稳定,我们可以在 PDF.JS官网 进行下载,部署在网站服务器上,理论上就可以了,但是我在虚拟机上安装后,viewer.html能打开pdf软件框架,但就是不能读取文件,F12可以看到是:
    {cat_tips_error}Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced{/cat_tips_error}

    pdf.js模块载入出错

    搞不清楚问题,在github上,也有此类问题的反馈,可惜小白看不懂解决方案。被迫放弃。
    庆幸的是我在 pdf.js使用小结 找到了另一个版本的,下载下来,上传到虚拟机,一切都是那样的顺利,完美解决。
    当然,F12仍然可以看到很多报错问题,但不影响我使用,那我就懒得管它。

补充

查找docker 容器的位置

用我以前的方法比较繁琐,这里最新发现的简便方法:
把文件复制到docker 对应容器的指定位置:
注意:首先把文件上传到NAS硬盘位置:/volume1/docker/onlyoffice/
其中:tender_wright是我onlyoffice对应的容器名称。
一条命令搞定。

docker cp /volume1/docker/onlyoffice/view.html tender_wright:/var/www/onlyoffice/documentserver-example/welcome

如果不知道指定路径,就放在总目录下面"/" 这个时候复制的文件名或格式最好具有独特性,就和以前及介绍方法基本一致了。

# 切换到对应的目录/volume1/@docker/btrfs/subvolumes,是为了更快的查找。
find /volume1/@docker/btrfs/subvolumes -name "view.html"

附件:

我目前使用的pdf.js
view.html,如果你懒得新建的话,那就直接下载吧

0

评论 (1)

取消
  1. 头像
    黑黑哒 匆匆过客
    中国浙江省宁波市电信 · Windows 10 · Google Chrome

    按这这个方案操作,会出现下载失败的问题,不知道哪里出错了

    回复
使用 Typecho 建站,并搭配 joe 主题(有修改)
蜀ICP备2022005623号 川公网安备 51012202001212号
本站已运行 00000000
Copyright © 1970 ~ Xcshare All rights reserved.