Bootstrap

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

前言

关于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>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
python中的 Pydantic 框架介绍
【三微网优化调度】面向低碳经济运行目标的多微网能量互联优化调度研究（Matlab代码实现）
搞懂深度学习到底需要哪些数学知识
Excel要精通到什么地步，才不会被四大秒？
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
通信电子线路实验-调幅模块仿真（发送与接收）
java-----异常
jmeter 常见问题汇总
2023年14界蓝桥杯省赛题解
基于springboot管理系统
;