office文件、压缩文档等在线预览的新方案 #3908
Replies: 15 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.
-
|
2024年7月13日，已经无法使用了，打开后一片空白，要不就是i'm sorry，有大佬看看是咋回事么？ |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
题外话:有微软谷歌或其他公开的文档预览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