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

概述

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

alist文档预览最终效果

正文

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

onlyoffice配置：

你首先要下载安装onlyoffice，这里就不在陈述了，自行搜索；

配置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>

上传到onlyoffice安装的目录下.(理论上，上传在其他地方也可以，但浏览器会有个跨域问题，如果你是小白，最好是放在onlyoffice同网站下），如果你是docker安装的onlyoffice，找不到对应目录或地址，请参考群晖 NAS Docker中荔枝相册Lychee 如何修改上传文件大小的限制，要学会举一反三。我放的地址是
```
/volume1/@docker/btrfs/subvolumes/3f6463eb9256a15cd09084b27350636850c3c1d74b98d3aa733a7fe53ed11ad4/var/www/onlyoffice/documentserver-example/welcome
```
供参考！
然后修改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文件是正确的。
如果你后台配置完后，看不到文件预览窗口了，只有文件下载窗口，那说明你后台的写法有误，我就是因为缺少了一个分割号,（，）白白浪费了一上午，还百思不得其解。
使用感受：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}

搞不清楚问题，在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,如果你懒得新建的话，那就直接下载吧

概述

正文

onlyoffice配置：

pdf.js配置

补充

查找docker 容器的位置

附件：

nextcloud和seafile对比，群晖docker部署记录！协同办公利器

为什么有的mp4视频文件，不能边播放边加载，而是要等到视频全部缓存完毕才开始播放？

孔径.流量.压差计算.xlsx 计算工具分享

思维导图，推荐百度脑图，本地离线应用及脑图文件下载，如何打印

评论 (1)