XC的博客
xcshare.site

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

208
1

Author:

xc

©

Wordage:

共计 3691 字

needs:

约 2 分钟

Popular:

208 ℃

Created:

目 录

概述

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
    否则会报错:

    The "document.fileType" parameter for the config object is invalid. Please correct it.

    当然,如果看到这个信息,至少证明你的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可以看到是:

    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

    pdf.js模块载入出错

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

    附件:

    我目前使用的pdf.js
    view.html,如果你懒得新建的话,那就直接下载吧
    此处内容,需回复之后可见

共计 1 条评论,点此发表评论
  1. 头像
    黑黑哒
    新人

    访客

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

    · Win 1x · Chrome · 浙江
博客主页 行业知识以及项目经验分享,是件有意义的事情。为国家培养中层力量,发挥自己的一点作用! 51统计
蜀ICP备2022005623号 川公网安备 51012202001212号 本站已运行 1 年 355 天 21 小时 15 分 Copyright © 2022 ~ 2024. xcshare:Hydraulic Engineer,生活记录与感想! All rights reserved.
历史足迹
分类目录
  • 💼工作
  • 🚴‍♂生活