office文件、压缩文档等在线预览的新方案 #3908
Replies: 14 comments 27 replies
-
|
牛！终于解决我的office文件不能在线预览的问题了。 |
Beta Was this translation helpful? Give feedback.
-
|
这个 Windows发行版好像是付费的？（得加入知识星球才能用?） |
Beta Was this translation helpful? Give feedback.
-
|
打开文档不刷新几次就不会显示出来，就剩下这个不爽了。 |
Beta Was this translation helpful? Give feedback.
-
开始没注意到怎么编译maven的，然后直接跑源码..现在源码都2G了，后来编译好了的也1.3G了 属实大 哈哈 |
Beta Was this translation helpful? Give feedback.
-
|
只保留部署包就好，源码可以删了，我windows的部署包解压后830M，它支持的文件类型比较多，压缩包在线预览就很不错。 |
Beta Was this translation helpful? Give feedback.
-
|
可能好一点吧。还是要刷新一次才行，不刷新就显示不出来，这是什么毛病啊？ |
Beta Was this translation helpful? Give feedback.
-
文档已更新，且支持其他存储 |
Beta Was this translation helpful? Give feedback.
-
|
kkfileview启动后，cmd窗口不能关闭。怎么解决呢？ |
Beta Was this translation helpful? Give feedback.
-
|
启动脚本里java改为start javaw，但是关闭的话需要到任务管理器kill掉javaw |
Beta Was this translation helpful? Give feedback.
-
|
可以了，谢谢指点！ |
Beta Was this translation helpful? Give feedback.
-
|
预览文档实际会在本地生成文档的三个版本：office、pdf、和图片，放在file文件夹里。每预览一次就会生成一次，导致这个文件夹体积会越来越大。 |
Beta Was this translation helpful? Give feedback.
-
|
有默认的自动清理任务，每天3点。也可以自己写个清理脚本。有时间了我给提个mr，比如每隔30min清理1h前创建的文件。 |
Beta Was this translation helpful? Give feedback.
-
|
对于更新频繁的文件用时间戳生成缓存文件名，可以保证缓存的预览文件不重复，始终查看的最新内容， |
Beta Was this translation helpful? Give feedback.
-
|
3.15版本下，文档预览报错。 |
Beta Was this translation helpful? Give feedback.
-
|
3.15本地存储访问方式有变化，文档步骤4已更新。 |
Beta Was this translation helpful? Give feedback.
-
|
href = 'https://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(down_link.href));、 |
Beta Was this translation helpful? Give feedback.
-
|
换成实际地址就可，有外网地址就填外网地址，使用外网地址的话kkfileview的配置文件里还要改下baseurl |
Beta Was this translation helpful? Give feedback.
-
|
3.16版本下还是会报{"code":500,"message":"failed link: failed to get file: object not |
Beta Was this translation helpful? Give feedback.
-
|
kkFileView的bug |
Beta Was this translation helpful? Give feedback.
-
|
大佬 4.3.0版本 也是这样吗？我用群晖自带的反代，现在老是401 |
Beta Was this translation helpful? Give feedback.
-
使用官网自带Iframe预览我终于找到了一个使用alist_V3使用自带Iframe框架的方法。 如果直接使用官方的 各组件部署的方式
启动和部署我就不讲啦，有很多大佬都说了。 假设服务端域名为：
具体步骤
需要将 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KKFileViewer</title>
</head>
<body>
<script type="text/javascript" src="https://kk.share/js/base64.min.js"></script>
<script>
function getQueryParamValue(name) {
const searchParams = new URLSearchParams(window.location.search);
return searchParams.get(name);
}
const url = decodeURIComponent(getQueryParamValue("url")); //要预览文件的访问地址
if (url === "null") {
console.log("url的参数为空!")
} else {
window.open('https://kk.share/onlinePreview?url='+encodeURIComponent(Base64.encode(url)),'_self');
}
</script>
<p>请在输入的网址中添加url参数，如http://kk.share/view.html?url=xxx</p>
</body>
</html>
|
Beta Was this translation helpful? Give feedback.
-
|
感觉这是正解，下方改源码貌似还是不行，因为还是组装不出 |
Beta Was this translation helpful? Give feedback.
-
|
大佬 有成功吗？？？ |
Beta Was this translation helpful? Give feedback.
-
|
你成功了吗，我一直显示sorry |
Beta Was this translation helpful? Give feedback.
-
|
试用了一下，可以用，但是内存占用太高，转换时间也很长，文件名里有特殊字符的（比如[），转换成pdf预览会打不开.... |
Beta Was this translation helpful? Give feedback.
-
|
在这里给自己做个笔记（我用Windows）：
{
"doc,docx,xls,xlsx,ppt,pptx": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url",
"Microsoft":"https://view.officeapps.live.com/op/view.aspx?src=$e_url"
},
"pdf": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url",
"PDF.js":"https://alist-org.github.io/pdf.js/web/viewer.html?file=$e_url"
},
"csv,tsv,dotm,xlt,xltm,dot,dotx,xlam,xla,pages,wps,dps,et,ett,wpt,odt,ods,ots,odp,otp,six,ott,fodt,fods": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
},
"vsd,vsdx,wmf,emf,eps,ofd,rtf,xmind,bpmn,eml,drawio,dcm": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
},
"epub": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
},
"obj,3ds,stl,ply,gltf,glb,off,3dm,fbx,dae,wrl,3mf,ifc,brep,step,iges,fcstd,bim": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
},
"dwg,dxf,dwf,iges,igs,dwt,dng,ifc,dwfx,stl,cf2,plt": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
},
"zip,rar,jar,tar,gzip,gz,7z": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
},
"psd,tif,tiff,tga,svg": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
},
"drawio": {
"kkFileView":"https://<自己的域名>:8012/onlinePreview?url=$b_url"
}
}点保存，完成。 |
Beta Was this translation helpful? Give feedback.
-
|
这里换成b_url会把预览文件保存为url编码的文件名，导致使用pdf格式预览时提示“Pdf.js 找不到文件” |
Beta Was this translation helpful? Give feedback.
-
|
感谢大佬 |
Beta Was this translation helpful? Give feedback.
-
|
大佬 ，尝试多次没成功，能指导下吗？ |
Beta Was this translation helpful? Give feedback.
-
|
这是否行不通 |
Beta Was this translation helpful? Give feedback.
-
|
顶上去 让开发看到 |
Beta Was this translation helpful? Give feedback.
-
|
有大佬能发下安装包吗，部署包，不会编译/哭死 |
Beta Was this translation helpful? Give feedback.
-
|
为什么我按这样做之后我没有出现预览的按钮？ |
Beta Was this translation helpful? Give feedback.
-
|
看一下你楼下的方法 |
Beta Was this translation helpful? Give feedback.
-
|
可以试试另一个方法, 根据前面大佬想到的view.html方案进行适配 如何使用首先就是使用官方的Iframe预览进行的,参照前面view.html的做法,使用前端的js将url进行组装
操作步骤
附录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> |
Beta Was this translation helpful? Give feedback.
-
|
可不可以把view文件打包到部署包里？我找到了打包位置，但访问view.hrml时不显示东西 |
Beta Was this translation helpful? Give feedback.
-
|
感觉体积不是很美丽啊，我只想要个压缩文档预览的 |
Beta Was this translation helpful? Give feedback.
-
题外话:有微软谷歌或其他公开的文档预览api，为啥非要自己部署一个呢？既然都使用了alist，那肯定觉得是公开的不安全，不方便呗
由于部署onlyoffice比较麻烦，redis，mq。。。
kkfileview部署简单，而且使用方便，支持的文件类型也超多，探索了以下集成方案：
1. 仓库地址：https://github.com/kekingcn/kkFileView ，下载源码后打包 mvn package，只保留部署包就可以。
2. 解压部署包，启动kkfileview(启动脚本bin/startup.bat)，服务启动后可在浏览器访问 http://127.0.0.1:8012 进行测试，
3. alist后台管理>预览>iframe 预览 修改为空：
4. alist后台管理>全局>自定义内容 修改为以下代码（代码中http://127.0.0.1:8012/ 换为kkfileview服务实际地址，md5.js可以自行部署，也可以直接打包到kkfileview的部署包中）：
Tips: 请在服务器给kkfileview预留些磁盘空间，体积特别大的文件就不建议预览了。
我的站:alist+kkfileview+ddnsto+other
要是官方能直接支持kkfileview就更完美了。
Beta Was this translation helpful? Give feedback.
All reactions