Alist+Kkfileview实现在线预览文件解决方案

最新推荐文章于 2024-06-02 21:44:40 发布
最新推荐文章于 2024-06-02 21:44:40 发布
阅读量3.2k 收藏 54
点赞数 64
文章标签： 经验分享 html 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/han5562877/article/details/136265735
版权

前言

关于alist+onlyoffice，一直是我使用的方式，但是缺点是没有办法看更多的文件格式，只能看到office的文件，所以我又找寻其他方法，找到了kkfileview服务。
首先需要一个域名，部署两个指向, 一个作为文件处理(http://kkfile.yoururl.com)，一个作为前端转发(http://kk.yoururl.com)

如何使用

首先就是使用官方的Iframe预览进行的,参照前面view.html的做法,使用前端的js将url进行组装
我的版本:

  • nginx 1.20
  • kkfileview 4.1.0 docker
  • alist 3.3 本地部署

操作步骤

  1. 配置nginx, kkfileview, alist, 并且通过nginx将ip:8012反代到http://kkfile.yoururl.com

  2. 在kk.yoururl.com的目录下新建一个html文件,这个名称随便取, 后面会用到,我以view.html为例

  3. 在kk.yoururl.com目录下新建一个文件夹js,将附录中的base.js放入

  4. 在view文件中添加代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KKFileViewer</title>
</head>

<body>
    <script src="http://kk.yoururl.com/js/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添加的过滤, 因为我的url后面会有alist_ts=12312312这种时间戳信息,如果kkflieview识别传入的链接不是正常链接, 就会报错,导致前端无法显示
        url = encodeURIComponent(url);
        let e_url='http://kkfile.yoururl.com/onlinePreview?url='+encodeURIComponent(BASE64.encode(url));
        console.log(e_url);
        window.open('http://kkfile.yoururl.com/onlinePreview?url='+encodeURIComponent(BASE64.encode(url)),'_self');
    }
    </script>
</body>
</html>

    代码说明:

    1. url过滤
      这一段是我根据url添加的过滤, 因为我的url后面会有alist_ts=时间戳这种参数,kkfileview默认是不识别的,为了使用我添加了过滤, 使得传入kkfileview的url是以pdf结尾
    const alistRegex = /(\?|&)alist_ts=\d+/; 
if (alistRegex.test(url)) {
    url = url.replace(alistRegex, '');
}

    1. base64.js

      因为我的文件中会有中文的存在, 一些base.min.js会不支持中文, 所以我就选择了使用base64.js

  5. 在alist后台中的预览-iframe中填入

    {
	"doc,docx,xls,xlsx,ppt,pptx": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"pdf": {
		"在线预览":"http://kk.yoururl.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": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"vsd,vsdx,wmf,emf,eps,ofd,rtf,xmind,bpmn,eml,drawio,dcm": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"epub": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"obj,3ds,stl,ply,gltf,glb,off,3dm,fbx,dae,wrl,3mf,ifc,brep,step,iges,fcstd,bim": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"dwg,dxf,dwf,iges,igs,dwt,dng,ifc,dwfx,stl,cf2,plt": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"zip,rar,jar,tar,gzip,gz,7z": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"psd,tif,tiff,tga,svg": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	},
	"drawio": {
		"在线预览":"http://kk.yoururl.com/view.html?url=$e_durl"
	}
}

在这里插入图片描述

附录

base64.js静态资源

/**
 * Created by SLICE_30_K on 2017/5/22.
 *
 * 支持一般Base64的编码和解码
 * 支持符合RFC_4648标准中"URL and Filename Safe Alphabet"的URL安全Base64编解码
 * 支持中文字符的编解码(Unicode编码)
 */
;(function (root, factory) {
    if (typeof exports === "object") {
        // CommonJS
        module.exports = exports = factory();
    }
    else if (typeof define === "function" && define.amd) {
        // AMD
        define(factory);
    }
    else {
        // Global (browser)
        window.BASE64 = factory();
    }
}(this, function () {
    var BASE64_MAPPING = [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
        'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
        'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
        'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
        'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
        'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
        'w', 'x', 'y', 'z', '0', '1', '2', '3',
        '4', '5', '6', '7', '8', '9', '+', '/'
    ];
    var URLSAFE_BASE64_MAPPING = [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
        'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
        'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
        'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
        'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
        'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
        'w', 'x', 'y', 'z', '0', '1', '2', '3',
        '4', '5', '6', '7', '8', '9', '-', '_'
    ];

    var _toBinary = function (ascii) {
        var binary = [];
        while (ascii > 0) {
            var b = ascii % 2;
            ascii = Math.floor(ascii / 2);
            binary.push(b);
        }
        binary.reverse();
        return binary;
    };

    var _toDecimal = function (binary) {
        var dec = 0;
        var p = 0;
        for (var i = binary.length - 1; i >= 0; --i) {
            var b = binary[i];
            if (b == 1) {
                dec += Math.pow(2, p);
            }
            ++p;
        }
        return dec;
    };

    var _toUTF8Binary = function (c, binaryArray) {
        var mustLen = (8 - (c + 1)) + ((c - 1) * 6);
        var fatLen = binaryArray.length;
        var diff = mustLen - fatLen;
        while (--diff >= 0) {
            binaryArray.unshift(0);
        }
        var binary = [];
        var _c = c;
        while (--_c >= 0) {
            binary.push(1);
        }
        binary.push(0);
        var i = 0, len = 8 - (c + 1);
        for (; i < len; ++i) {
            binary.push(binaryArray[i]);
        }

        for (var j = 0; j < c - 1; ++j) {
            binary.push(1);
            binary.push(0);
            var sum = 6;
            while (--sum >= 0) {
                binary.push(binaryArray[i++]);
            }
        }
        return binary;
    };

    var _toBinaryArray = function (str) {
        var binaryArray = [];
        for (var i = 0, len = str.length; i < len; ++i) {
            var unicode = str.charCodeAt(i);
            var _tmpBinary = _toBinary(unicode);
            if (unicode < 0x80) {
                var _tmpdiff = 8 - _tmpBinary.length;
                while (--_tmpdiff >= 0) {
                    _tmpBinary.unshift(0);
                }
                binaryArray = binaryArray.concat(_tmpBinary);
            } else if (unicode >= 0x80 && unicode <= 0x7FF) {
                binaryArray = binaryArray.concat(_toUTF8Binary(2, _tmpBinary));
            } else if (unicode >= 0x800 && unicode <= 0xFFFF) {//UTF-8 3byte
                binaryArray = binaryArray.concat(_toUTF8Binary(3, _tmpBinary));
            } else if (unicode >= 0x10000 && unicode <= 0x1FFFFF) {//UTF-8 4byte
                binaryArray = binaryArray.concat(_toUTF8Binary(4, _tmpBinary));
            } else if (unicode >= 0x200000 && unicode <= 0x3FFFFFF) {//UTF-8 5byte
                binaryArray = binaryArray.concat(_toUTF8Binary(5, _tmpBinary));
            } else if (unicode >= 4000000 && unicode <= 0x7FFFFFFF) {//UTF-8 6byte
                binaryArray = binaryArray.concat(_toUTF8Binary(6, _tmpBinary));
            }
        }
        return binaryArray;
    };

    var _toUnicodeStr = function (binaryArray) {
        var unicode;
        var unicodeBinary = [];
        var str = "";
        for (var i = 0, len = binaryArray.length; i < len;) {
            if (binaryArray[i] == 0) {
                unicode = _toDecimal(binaryArray.slice(i, i + 8));
                str += String.fromCharCode(unicode);
                i += 8;
            } else {
                var sum = 0;
                while (i < len) {
                    if (binaryArray[i] == 1) {
                        ++sum;
                    } else {
                        break;
                    }
                    ++i;
                }
                unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 1, i + 8 - sum));
                i += 8 - sum;
                while (sum > 1) {
                    unicodeBinary = unicodeBinary.concat(binaryArray.slice(i + 2, i + 8));
                    i += 8;
                    --sum;
                }
                unicode = _toDecimal(unicodeBinary);
                str += String.fromCharCode(unicode);
                unicodeBinary = [];
            }
        }
        return str;
    };

    var _encode = function (str, url_safe) {
        var base64_Index = [];
        var binaryArray = _toBinaryArray(str);
        var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;

        var extra_Zero_Count = 0;
        for (var i = 0, len = binaryArray.length; i < len; i += 6) {
            var diff = (i + 6) - len;
            if (diff == 2) {
                extra_Zero_Count = 2;
            } else if (diff == 4) {
                extra_Zero_Count = 4;
            }
            var _tmpExtra_Zero_Count = extra_Zero_Count;
            while (--_tmpExtra_Zero_Count >= 0) {
                binaryArray.push(0);
            }
            base64_Index.push(_toDecimal(binaryArray.slice(i, i + 6)));
        }

        var base64 = '';
        for (var i = 0, len = base64_Index.length; i < len; ++i) {
            base64 += dictionary[base64_Index[i]];
        }

        for (var i = 0, len = extra_Zero_Count / 2; i < len; ++i) {
            base64 += '=';
        }
        return base64;
    };

    var _decode = function (_base64Str, url_safe) {
        var _len = _base64Str.length;
        var extra_Zero_Count = 0;
        var dictionary = url_safe ? URLSAFE_BASE64_MAPPING : BASE64_MAPPING;

        if (_base64Str.charAt(_len - 1) == '=') {
            if (_base64Str.charAt(_len - 2) == '=') {//两个等号说明补了4个0
                extra_Zero_Count = 4;
                _base64Str = _base64Str.substring(0, _len - 2);
            } else {//一个等号说明补了2个0
                extra_Zero_Count = 2;
                _base64Str = _base64Str.substring(0, _len - 1);
            }
        }

        var binaryArray = [];
        for (var i = 0, len = _base64Str.length; i < len; ++i) {
            var c = _base64Str.charAt(i);
            for (var j = 0, size = dictionary.length; j < size; ++j) {
                if (c == dictionary[j]) {
                    var _tmp = _toBinary(j);
                    /*不足6位的补0*/
                    var _tmpLen = _tmp.length;
                    if (6 - _tmpLen > 0) {
                        for (var k = 6 - _tmpLen; k > 0; --k) {
                            _tmp.unshift(0);
                        }
                    }
                    binaryArray = binaryArray.concat(_tmp);
                    break;
                }
            }
        }
        if (extra_Zero_Count > 0) {
            binaryArray = binaryArray.slice(0, binaryArray.length - extra_Zero_Count);
        }
        var str = _toUnicodeStr(binaryArray);
        return str;
    };

    var __BASE64 = {
        encode: function (str) {
            return _encode(str, false);
        },
        decode: function (base64Str) {
            return _decode(base64Str, false);
        },
        urlsafe_encode: function (str) {
            return _encode(str, true);
        },
        urlsafe_decode: function (base64Str) {
            return _decode(base64Str, true);
        }
    };

    return __BASE64;
}));

控制台有输出的版本view.html(方便你看到哪里有错误)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KKFileViewer</title>
</head>

<body>
    <script src="https://kk.djxx.club/js/base64.min.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 {
        console.log(url);
        const alistRegex = /(\?|&)alist_ts=\d+/;
        if (alistRegex.test(url)) {
            url = url.replace(alistRegex, '');
        }
        
        console.log(url);
        
        url = encodeURIComponent(url); // 对修改后的url进行编码
        console.log(url);
        
        let e_url='https://office.djxx.club/onlinePreview?url='+encodeURIComponent(BASE64.encode(url));
        console.log(e_url);
        window.open('https://office.djxx.club/onlinePreview?url='+encodeURIComponent(BASE64.encode(url)),'_self');
    }
    </script>
</body>
</html>
DDD-HHY
关注
  • 64
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
alist网盘增加onlyoffice
星星的博客
07-05 3411
alist网盘十分的好用且神奇，但无奈的是无法查看pdf和office文档预览。在linux主机中增加view.html文件，其中src配置为自己的ip地址，可以保存至/home/onlyoffice中。"onlyoffice":"http://主机IP:8081/view.html?src的值，要填写自己的主机IP，端口号就是刚才创建的onlyoffice容器暴露的端口。nginx安装好后，就在nginx中新建配置添加server，端口是8081。完成添加配置，现在可以在网页上正常预览文档。
参考alist文件预览服务
weixin_43026613的博客
09-20 503
2023-05-01之后创建的项目使用WebOffice进行文档预览和在线协作按接口调用次数计费，调用。
alist配合onlyoffice 实现在线预览
最新发布
weixin_39504040的博客
06-02 568
我是采用docker安装，采用的版本是7.2， aarch64 可以支持，端口号为。配置文件里面的主机IP，需要修改为安装onlyoffice 的ip。注意：配置文件中的主机IP需要修改为自己机器的IP。增加conf配置文件。
Alist V3版本 API使用文档 -个人整理
mashiqing的博客
11-26 1万+
Alist V3是一个支持多种存储，支持网页浏览和 WebDAV 的文件列表程序，由 gin 和 Solidjs 驱动。 Alist的官方文档提供了V2版本的API说明，但对于最新的V3版本并没有，这里个人整理了一些V3版本的常用API和参数设置，返回示例供有需要的朋友参考。整理人：萌萌哒赫萝 GIthub账号：KuingsmilePOST
NAS入门之——Alist使用指南
热门推荐
我的博客
02-24 2万+
Alist，可以将二十款网盘挂载本地的神器，还能搭建自己的网盘分享站。软件下载启动登录挂载网盘网盘挂载到本地开机启动more项目地址：https://github.com/alist-org/alist下载地址：https://github.com/alist-org/alist/releases文档地址：https://alist.nn.ci/zh/guide/install/manual.html预览地址：https://al.nn.ci/
为AList V3添加在线epub预览支持教程
mashiqing的博客
12-16 1810
为AList V3添加了epub文件在线预览的支持
AList文本预览模块
海天鹰
01-25 928
,"pdf": {},"epub": {
SpringBoot：kkFileView万能文件在线预览（已开源）
GIS摆渡人
06-30 2646
在之前的文章中，我们使用MinIO实现了文件存储，用于存储各种格式的文件。有时候我们不仅需要文件存储，还需要文件的在线预览。这里给大家推荐一个基于SpringBoot的文件预览神器kkFileView，基本支持主流文件的在线预览，使用也很简单，希望对大家有所帮助！kkFileView可以用来搭建文件在线预览服务，在Github上已有5.7k+Star。
【gitHubDailyShare】对接多个不同存储平台，部署方便，开箱即用，并能在线预览
m0_67678371的博客
04-03 699
GitHub 上一个支持多存储的文件列表程序：alist，可配置与对接多个不同存储平台，部署方便，开箱即用，并能在线预览、管理多种不同格式的文件。 Spring Boot 相关漏洞学习资料，利用方法和技巧合集，黑盒安全评估 check list。 MHDDoS，一个具有 51 种攻击方法的 Python3 DDoS 开源脚本。 Hacking C++，一份颇为全面的 C++ 速查表与信息图表。覆盖了算法、随机分布、序列、Lambda 表达式、设计指南等内容。 ...
SpringBoot+Vue+kkFileView实现文档管理(文档上传、下载、在线预览)
BADAO_LIUMANG_QIZHI的博客
12-12 1万+
上面在使用OpenOffice实现doc、excel、ppt等文档的管理和预览。除此之外可用kkFileView实现包括且更多文档的预览。
iframe和父窗口通讯实例
02-17
iframe和父窗口通讯实例~ 包括js和html代码~
Alist安装包+快速启动-停止脚本
10-19
Alist安装包+快速启动-停止脚本 网盘变本地硬盘的神器 等于把整个网盘搬到自己电脑上！从此以后，网盘里的图片，电脑上想看就看，想删就删，想添加就添加，就是嗨皮！
Alist+RaiDrive，一招教你硬盘多出80个T！.zip
08-29
Alist+RaiDrive，一招教你硬盘多出80个T！.zip含下载地址可存云盘
linux下 Rclone+Alist实现挂载网盘（天翼云盘为例）
05-11
linux下 Rclone+Alist实现挂载网盘（天翼云盘为例）
C++ STL list 遍历删除出错解决方案
12-31
C++ STL list 遍历删除崩溃 错误用法一 下面这种用法会在for的地方崩溃，分析 第一次for循环的时候 it=0,当t.erase(it)执行完成之后 it就变成了 -17891602 表明it不能再作为迭代器进行运算，自然会报错。 #...
JS中getElementsByClassName与classList兼容性问题解决方案分析
10-16
主要介绍了JS中getElementsByClassName与classList兼容性问题解决方案,结合实例形式分析了getElementsByClassName与classList的使用方法、原理及兼容性问题的处理技巧,需要的朋友可以参考下
Alist 配置和美化
weixin_72700161的博客
02-01 2576
alist搭建与美化指南
MASA MAUI 预览Office文件
MASAteam的博客
10-16 202
在线预览Office文件Api，拼接自己的office文件地址参数后在浏览器中访问即可达到预览效果。接下来我们按照这个思路在Maui中实现这个效果。本文主要介绍了如何在Maui下预览Office文件，并分享开发过程正踩过的坑以及对应的解决方案。希望能帮助到遇到同样需求问题的朋友。
Linux：kkFileView v4.0.0 安装、启动教程（包含nginx的配置）
weixin_68338449的博客
03-04 1309
注意的是此处的配置，要与你kkfileview的配置相关联，如果你的端口不是8012，那么你nginx里面的端口就要修改，如果你是域名代理的，那么此处红线标记的就要改成域名。kkFileView 服务启动完成，耗时:6.556363035s，演示页请访问: http://127.0.0.1:8012。启动前需要杀掉已启动的libreoffice，下面提供一些指令。进入kkFileView-4.0.0/脚本所在目录，执行启动脚本。一般情况下，我们nginx代理都是80，所以端口在访问时可以省略。
springboot+vue+oss pdf在线预览
08-27
在Spring Boot和Vue项目中实现PDF在线预览可以通过集成pdf.js库来实现。首先，您需要从官网下载pdf.js源码，并将其放入您的项目中。具体步骤如下： 1. 在官方网站下载pdf.js源码。 2. 将下载的源码放入您的Spring Boot项目中的某个目录中。 3. 打开viewer.html文件，您会注意到它会自动跳转到一个pdf文件。这个pdf文件是官方的示例文件。 4. 如果您只想打开一个特定的pdf文件，只需将官方示例文件替换为您自己的pdf文件。 5. 在viewer.js文件中搜索"defaultUrl"，大约在第3500行左右。您可以找到类似上述代码的部分（注意：不同版本的pdf.js可能会略有差异）。 6. 只需更改"value"的值，即可实现预览您指定的pdf文件。 7. 如果您需要根据前端传递的不同值来响应不同的pdf文件，可以使用动态获取的方式来实现。 另外，如果希望使用浏览器自带的预览pdf功能，可以参考使用pdf.js的实现方式。但需要注意的是，某些浏览器可能不支持此功能，如360浏览器。您可以在我的博客中找到有关使用浏览器预览pdf的更多信息。 综上所述，您可以根据以上步骤在Spring Boot和Vue项目中实现PDF在线预览。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [springboot+vue整合pdf.js实现预览pdf](https://blog.csdn.net/qq_14853853/article/details/111176085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DDD-HHY

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值