AList~办公利器&结合kkfileview实现office文件、压缩文档等在线预览

虽然群晖很强大，但在某些方便，通过docker自行部署个AList更香~尤其是其操作简单，对业务部门非常友好（在线观看视频、文档等）~部署后基本上可以甩手掌柜。

业务部门需求是搭建个在线视频库，群晖的video可以实现，但操作对于业务部门来说相对复杂，我又不想揽这个活。与此同时，百度搜到了docker版部署express-ffmpeg，测试了一下，功能不错，但操作还是有点复杂。突然想到了之前研究过的Alist这个神器。

使用简单

AList 从一开始就设计为易于安装，并且可以在所有平台上使用。

多种存储

AList 支持多个存储提供商，包括本地存储、阿里云盘、OneDrive、Google Drive 等，且易于拓展。

受保护的路由

为特定路径添加密码保护和身份验证

文件预览

支持视频、音频、文档、PDF、图片预览等，甚至支持 ipa 安装

打包下载

使用浏览器的 stream api 支持打包下载，无需使用服务器

相关链接

• 账号默认为admin，密码查看系统日志
• 官方介绍https://alist.nn.ci/zh/
• docker镜像xhofe/alist

• docker run -d --restart=always -v /etc/alist:/opt/alist/data -p 5244:5244 -e PUID=0 -e PGID=0 -e UMASK=022 --name="alist" xhofe/alist:latest
  #查看初始账号密码
  docker exec -it alist ./alist admin

前端UI自定义脚本

参考链接：https://www.letcloud.cn/3659.html

AList管理---设置---全局---自定义内容

# 移除下载选项
<style>
.hope-select__trigger.hope-c-kvTTWD.hope-c-huZphZ.hope-c-kvTTWD-hYRNAb-variant-filled.hope-c-kvTTWD-gfwxhr-size-md.hope-c-huZphZ-cIGthf-cv.hope-c-PJLV.hope-c-PJLV-ijSQbqe-css{display: none !important;}
</style>

AList管理---设置---全局---自定义头部

#移除搜索中的键盘图
<style>
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {display: none !important;}
</style>

#整个去除搜索
<style>
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikEIIxw-css {display: none !important;}

#使用背景图(亮色背景)(GIF可用)
<style>
.hope-ui-light{background-image: url("图片网址")!important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;}
</style>

#使用背景图(暗色背景)(GIF可用)
<style>
.hope-ui-dark {background-image: url(图片网址) !important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;}
</style>

#顶部新增图片(GIF可用)
<img src="图片网址" style="display:block; margin:auto;" />

kkfileview部署可参考群晖docker部署keking/kkfileview

接下来描述如何将alist&kkfileview对接。

1、首先保障kkfileview部署“http://ip:port”能够正常访问。

2、alist后台管理>预览>iframe 预览 修改为空：

{}

tips：

默认的值记得备份

{
	"doc,docx,xls,xlsx,ppt,pptx": {
		"Microsoft":"https://view.officeapps.live.com/op/view.aspx?src=$e_url",
		"Google":"https://docs.google.com/gview?url=$e_url&embedded=true"
	},
	"pdf": {
		"PDF.js":"https://alist-org.github.io/pdf.js/web/viewer.html?file=$e_url"
	},
	"epub": {
		"EPUB.js":"https://alist-org.github.io/static/epub.js/viewer.html?url=$e_url"
	}
}

3、alist后台管理>全局>自定义内容 修改为以下代码（代码中http://127.0.0.1:8012/ 换为kkfileview服务实际地址http://ip:port，md5.js可以自行部署，也可以直接打包到kkfileview的部署包中）：

<script type="text/javascript" src="http://127.0.0.1:8012/js/base64.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8012/js/md5.js"></script>
<script>
setInterval(function () {
    let index = location.href.lastIndexOf('.');
    if (index < 0) {
        return;
    }
    let suffix = location.href.toLowerCase().substring(index + 1);
    if (!['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'zip', 'rar'].includes(suffix)) {
        return;
    }
    let down_link = document.querySelector("a[type='button']");
    if (down_link == null) {
        return;
    }
    let tmp_link = document.getElementById("tmp_link");
    let href;
    if (down_link.href.indexOf(location.host) > -1) {
        href = 'http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(down_link.href));
    } else {
        href = 'http://127.0.0.1:8012/onlinePreview?url=' +
            encodeURIComponent(Base64.encode(down_link.href + '&fullfilename=' + hexMD5(location.href) + '.' + suffix));
    }
    if (tmp_link != null) {
        tmp_link.href = href;
        return;
    }
    tmp_link = document.createElement('a');
    tmp_link.text = '预览';
    tmp_link.target = '_blank';
    tmp_link.id = 'tmp_link';
    tmp_link.className = down_link.className;
    tmp_link.href = href;
    down_link.parentNode.appendChild(tmp_link);
}, 1000);
</script>