mirror of
https://gitee.com/kekingcn/file-online-preview.git
synced 2026-04-12 02:57:22 +00:00
Merge pull request #733 from kekingcn/codex/redesign-demo-page-v1-polish
[codex] polish demo portal pages
This commit is contained in:
kl
GitHub
@@ -52,6 +52,12 @@
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-actuator</artifactId>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-devtools</artifactId>
|
||||
<scope>runtime</scope>
|
||||
<optional>true</optional>
|
||||
</dependency>
|
||||
|
||||
<!-- ========== 文档格式转换 ========== -->
|
||||
<dependency>
|
||||
@@ -366,4 +372,4 @@
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
</project>
|
||||
</project>
|
||||
|
||||
16
server/src/main/bin/dev.sh
Executable file
16
server/src/main/bin/dev.sh
Executable file
@@ -0,0 +1,16 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
ROOT_DIR=$(cd "$(dirname "$0")/../../../.." || exit 1; pwd)
|
||||
SERVER_DIR="$ROOT_DIR/server"
|
||||
|
||||
if [ -n "$JAVA_HOME" ]; then
|
||||
export PATH="$JAVA_HOME/bin:$PATH"
|
||||
fi
|
||||
|
||||
cd "$SERVER_DIR" || exit 1
|
||||
|
||||
mvn spring-boot:run \
|
||||
-Dspring-boot.run.addResources=true \
|
||||
-Dspring-boot.run.jvmArguments="-Dfile.encoding=UTF-8 -Dspring.config.location=$SERVER_DIR/src/main/config/application.properties"
|
||||
@@ -31,6 +31,11 @@ public class IndexController {
|
||||
return "/main/integrated";
|
||||
}
|
||||
|
||||
@GetMapping( "/contact")
|
||||
public String go2Contact(){
|
||||
return "/main/contact";
|
||||
}
|
||||
|
||||
@GetMapping( "/")
|
||||
public String root() {
|
||||
return "/main/index";
|
||||
|
||||
1356
server/src/main/resources/static/css/main-pages.css
Normal file
1356
server/src/main/resources/static/css/main-pages.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Excel</title><path d="M23 1.5q.41 0 .7.3.3.29.3.7v19q0 .41-.3.7-.29.3-.7.3H7q-.41 0-.7-.3-.3-.29-.3-.7V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h5V2.5q0-.41.3-.7.29-.3.7-.3zM6 13.28l1.42 2.66h2.14l-2.38-3.87 2.34-3.8H7.46l-1.3 2.4-.05.08-.04.09-.64-1.28-.66-1.29H2.59l2.27 3.82-2.48 3.85h2.16zM14.25 21v-3H7.5v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3H7.5v3zm8.25 15v-3h-6.75v3zm0-4.5v-3.75h-6.75v3.75zm0-5.25V7.5h-6.75v3.75zm0-5.25V3h-6.75v3Z"/></svg>
|
||||
|
After Width: | Height: | Size: 563 B |
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Adobe Acrobat Reader</title><path d="M23.63 15.3c-.71-.745-2.166-1.17-4.224-1.17-1.1 0-2.377.106-3.761.354a19.443 19.443 0 0 1-2.307-2.661c-.532-.71-.994-1.49-1.42-2.236.817-2.484 1.207-4.507 1.207-5.962 0-1.632-.603-3.336-2.342-3.336-.532 0-1.065.32-1.349.781-.78 1.384-.425 4.4.923 7.381a60.277 60.277 0 0 1-1.703 4.507c-.568 1.349-1.207 2.733-1.917 4.01C2.834 18.53.314 20.34.03 21.758c-.106.533.071 1.03.462 1.42.142.107.639.533 1.49.533 2.59 0 5.323-4.188 6.707-6.707 1.065-.355 2.13-.71 3.194-.994a34.963 34.963 0 0 1 3.407-.745c2.732 2.448 5.145 2.839 6.352 2.839 1.49 0 2.023-.604 2.2-1.1.32-.64.106-1.349-.213-1.704zm-1.42 1.03c-.107.532-.64.887-1.384.887-.213 0-.39-.036-.604-.071-1.348-.32-2.626-.994-3.903-2.059a17.717 17.717 0 0 1 2.98-.248c.746 0 1.385.035 1.81.142.497.106 1.278.426 1.1 1.348zm-7.524-1.668a38.01 38.01 0 0 0-2.945.674 39.68 39.68 0 0 0-2.52.745 40.05 40.05 0 0 0 1.207-2.555c.426-.994.78-2.023 1.136-2.981.354.603.745 1.207 1.135 1.739a50.127 50.127 0 0 0 1.987 2.378zM10.038 1.46a.768.768 0 0 1 .674-.425c.745 0 .887.851.887 1.526 0 1.135-.355 2.874-.958 4.861-1.03-2.768-1.1-5.074-.603-5.962zM6.134 17.997c-1.81 2.981-3.549 4.826-4.613 4.826a.872.872 0 0 1-.532-.177c-.213-.213-.32-.461-.249-.745.213-1.065 2.271-2.555 5.394-3.904Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft PowerPoint</title><path d="M13.5 1.5q1.453 0 2.795.375 1.342.375 2.508 1.06 1.166.686 2.12 1.641.956.955 1.641 2.121.686 1.166 1.061 2.508Q24 10.547 24 12q0 1.453-.375 2.795-.375 1.342-1.06 2.508-.686 1.166-1.641 2.12-.955.956-2.121 1.641-1.166.686-2.508 1.061-1.342.375-2.795.375-1.29 0-2.52-.305-1.23-.304-2.337-.884-1.108-.58-2.063-1.418-.955-.838-1.693-1.893H.997q-.411 0-.704-.293T0 17.004V6.996q0-.41.293-.703T.996 6h3.89q.739-1.055 1.694-1.893.955-.837 2.063-1.418 1.107-.58 2.337-.884Q12.21 1.5 13.5 1.5zm.75 1.535v8.215h8.215q-.14-1.64-.826-3.076-.686-1.436-1.782-2.531-1.095-1.096-2.537-1.782-1.441-.685-3.07-.826zm-5.262 7.57q0-.68-.228-1.166-.229-.486-.627-.79-.399-.305-.938-.446-.539-.14-1.172-.14H2.848v7.863h1.84v-2.742H5.93q.574 0 1.119-.17t.978-.493q.434-.322.698-.802.263-.48.263-1.114zM13.5 21q1.172 0 2.262-.287t2.056-.82q.967-.534 1.776-1.278.808-.744 1.418-1.664.61-.92.984-1.986.375-1.067.469-2.227h-9.703V3.035q-1.735.14-3.27.908T6.797 6h4.207q.41 0 .703.293t.293.703v10.008q0 .41-.293.703t-.703.293H6.797q.644.715 1.412 1.271.768.557 1.623.944.855.387 1.781.586Q12.54 21 13.5 21zM5.812 9.598q.575 0 .915.228.34.229.34.838 0 .27-.124.44-.123.17-.31.275-.188.105-.422.146-.234.041-.445.041H4.687V9.598Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Word</title><path d="M23.004 1.5q.41 0 .703.293t.293.703v19.008q0 .41-.293.703t-.703.293H6.996q-.41 0-.703-.293T6 21.504V18H.996q-.41 0-.703-.293T0 17.004V6.996q0-.41.293-.703T.996 6H6V2.496q0-.41.293-.703t.703-.293zM6.035 11.203l1.442 4.735h1.64l1.57-7.876H9.036l-.937 4.653-1.325-4.5H5.38l-1.406 4.523-.938-4.675H1.312l1.57 7.874h1.641zM22.5 21v-3h-15v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3h-15v3Z"/></svg>
|
||||
|
After Width: | Height: | Size: 510 B |
104
server/src/main/resources/web/main/contact.ftl
Normal file
104
server/src/main/resources/web/main/contact.ftl
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>kkFileView 技术支持</title>
|
||||
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/theme.css"/>
|
||||
<link rel="stylesheet" href="css/main-pages.css"/>
|
||||
<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
|
||||
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="app-shell">
|
||||
<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
|
||||
</div>
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="./index">首页</a></li>
|
||||
<li><a href="./integrated">接入说明</a></li>
|
||||
<li><a href="./record">版本发布记录</a></li>
|
||||
<li><a href="./sponsor">赞助开源</a></li>
|
||||
<li class="active"><a href="./contact">技术支持</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="page-shell">
|
||||
<div class="container" role="main">
|
||||
<section class="hero-section release-hero">
|
||||
<div class="hero-copy">
|
||||
<div class="contact-hero-layout">
|
||||
<div class="contact-hero-copy">
|
||||
<span class="eyebrow">Contact Us</span>
|
||||
<h1 class="hero-title">技术支持</h1>
|
||||
<p class="hero-subtitle">
|
||||
如果你在部署、安装、接入或日常使用 kkFileView 时需要更直接的支持，
|
||||
可以加入我们的付费知识星球，获取安装使用技术支持。
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="hero-link primary" href="https://wx.zsxq.com/group/48844125114258" target="_blank">加入知识星球</a>
|
||||
<a class="hero-link secondary" href="./integrated">查看接入说明</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-hero-side">
|
||||
<div class="support-summary">
|
||||
<div class="support-summary-item">
|
||||
<span class="tag brand">安装支持</span>
|
||||
<p>提供最新的安装发行包，公示安全补丁等。</p>
|
||||
</div>
|
||||
<div class="support-summary-item">
|
||||
<span class="tag">使用咨询</span>
|
||||
<p>围绕接入、配置和日常使用问题提供支持。</p>
|
||||
</div>
|
||||
<div class="support-summary-item">
|
||||
<span class="tag highlight">付费知识星球</span>
|
||||
<p>通过知识星球联系，我们提供更直接的技术支持。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="sponsor-grid">
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Support Scope</span>
|
||||
<h3>支持内容</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p>如果你希望更快完成部署和落地，可以通过知识星球联系我们，获得更直接的安装使用支持。</p>
|
||||
<ul>
|
||||
<li>安装部署相关问题。</li>
|
||||
<li>配置、接入和常见使用问题。</li>
|
||||
<li>围绕实际使用场景的排查与建议。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Knowledge Planet</span>
|
||||
<h3>加入方式</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p>知识星球地址：</p>
|
||||
<p><a href="https://wx.zsxq.com/group/48844125114258" target="_blank">https://wx.zsxq.com/group/48844125114258</a></p>
|
||||
<div class="note-row">
|
||||
<span class="tag brand"><a href="https://wx.zsxq.com/group/48844125114258" target="_blank">立即加入</a></span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,118 +1,254 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>接入说明</title>
|
||||
<title>kkFileView 接入说明</title>
|
||||
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/theme.css"/>
|
||||
<link rel="stylesheet" href="css/main-pages.css"/>
|
||||
<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
|
||||
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="highlight/highlight.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<body class="app-shell">
|
||||
<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
|
||||
<a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
|
||||
</div>
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="./index">首页</a></li>
|
||||
<li class="active"><a href="./integrated">接入说明</a></li>
|
||||
<li><a href="./record">版本发布记录</a></li>
|
||||
<li><a href="./sponsor">赞助开源</a></li>
|
||||
<li><a href="./contact">技术支持</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container theme-showcase" role="main">
|
||||
<#-- 接入说明 -->
|
||||
<div class="page-header">
|
||||
<h1>接入说明</h1>
|
||||
本文档针对前端项目接入 kkFileView 的说明，并假设 kkFileView 的服务地址为：http://127.0.0.1:8012。
|
||||
</div>
|
||||
<div class="well">
|
||||
<div class="page-shell">
|
||||
<div class="container" role="main">
|
||||
<section class="hero-section release-hero">
|
||||
<div class="hero-copy">
|
||||
<span class="eyebrow">Integration Guide</span>
|
||||
<h1 class="hero-title">5 分钟把 kkFileView 接进你的业务项目。</h1>
|
||||
<p class="hero-subtitle hero-subtitle-inline">
|
||||
这里按常见接入场景提供示例，方便你直接按需选用。默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>。
|
||||
</p>
|
||||
<div class="note-row">
|
||||
<span class="tag brand">HTTP / HTTPS</span>
|
||||
<span class="tag">FTP</span>
|
||||
<span class="tag highlight">AES</span>
|
||||
<span class="tag warn">附加参数</span>
|
||||
</div>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-panel">
|
||||
<strong>URL</strong>
|
||||
<span>所有预览能力统一汇总到 `onlinePreview` 入口。</span>
|
||||
</div>
|
||||
<div class="summary-panel">
|
||||
<strong>Base64</strong>
|
||||
<span>普通接入默认对原始文件地址做 Base64 编码后再传入。</span>
|
||||
</div>
|
||||
<div class="summary-panel">
|
||||
<strong>参数扩展</strong>
|
||||
<span>支持页码、高亮、水印、密码、跨域、AES 和秘钥等控制项。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="font-size: 16px;">
|
||||
【http/https 资源文件预览】如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以成功实现：
|
||||
<p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
||||
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址 <br>
|
||||
window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(base64Encode(url)));
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
<div style="font-size: 16px;">
|
||||
【http/https 流资源文件预览】很多系统内不是直接暴露文件下载地址，而是请求通过id、code等参数到通过统一的接口，后端通过id或code等参数定位文件，再通过OutputStream输出下载，此时下载url是不带文件后缀名的，预览时需要拿到文件名，传一个参数fullfilename=xxx.xxx来指定文件名，示例如下
|
||||
<p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
||||
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址<br>
|
||||
var previewUrl = originUrl + '&fullfilename=test.txt'<br>
|
||||
window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
<div style="font-size: 16px;">
|
||||
【ftp 资源文件预览】如果要预览的FTP url是可以匿名访问的（不需要用户名密码），则可以直接通过下载url预览，示例如下
|
||||
<p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
||||
var url = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址<br>
|
||||
window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
<div style="font-size: 16px;">
|
||||
【ftp 加密资源文件预览】如果 FTP 需要认证访问服，可以通过在 url 中加入用户名密码等参数预览，示例如下
|
||||
<p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
||||
var originUrl = 'ftp://127.0.0.1/file/test.txt'; //要预览文件的访问地址<br>
|
||||
var previewUrl = originUrl + '?ftp.control.port=xx&ftp.username=xx&ftp.password=xx&ftp.control.encoding=(gbk,utf8等)'; //(为了安全强烈建议在配置中设置相关信息)<br>
|
||||
window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
|
||||
</p>
|
||||
</div>
|
||||
<div style="font-size: 16px;">
|
||||
【Basic 鉴权资源文件预览】如果需要认证访问服，可以通过在url中加入用户名密码等参数预览，示例如下
|
||||
<p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
||||
var originUrl = 'http://127.0.0.1/file/test.txt'; //要预览文件的访问地址<br>
|
||||
var previewUrl = originUrl + '?basic.name=admin&basic.pass=123456'; //(为了安全强烈建议在配置中设置相关信息)<br>
|
||||
window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
|
||||
</p>
|
||||
</div>
|
||||
<div style="font-size: 16px;">
|
||||
AES加密接入方法，示例如下
|
||||
<p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
||||
主要事项：首先引入下面js 在把url转换成AES,注意前后端key必须相同（注意：JS下载到你接入服务器的网址）<br>
|
||||
<script src="${baseUrl}js/crypto-js.js"></script><br>
|
||||
<script src="${baseUrl}js/aes.js"></script><br>
|
||||
function aesEncrypt(encryptString, key) { <br>
|
||||
var key = CryptoJS.enc.Utf8.parse(key); <br>
|
||||
var srcs = CryptoJS.enc.Utf8.parse(encryptString); <br>
|
||||
var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }); <br>
|
||||
return encrypted.toString(); <br>
|
||||
}<br>
|
||||
var key = "1234567890123456"; // AES秘钥16位数字<br>
|
||||
var url = "http://127.0.0.1/file/test.txt";<br>
|
||||
window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(aesEncrypt(url, key))+'&encryption=aes');
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 16px;">
|
||||
其他参数，示例如下
|
||||
<p style="background-color: #2f332a;color: #cccccc;font-size: 14px;padding:10px;margin-top:10px;">
|
||||
密码参数：&filePassword=加密文件的密码<br>
|
||||
页码参数：&page=选择第几页预览<br>
|
||||
高亮参数：&highlightall=关键字 突出显示 <br>
|
||||
水印参数：&watermarkTxt=你的水印<br>
|
||||
重生参数：&forceUpdatedCache=true <br>
|
||||
跨域参数：&kkagent=true <br>
|
||||
加密缓存：&usePasswordCache=true <br>
|
||||
秘钥参数：&key= 访问秘钥 <br>
|
||||
主要事项：以上参数是把url转换成base64后面在添加<br>
|
||||
var url = 'http://127.0.0.1:8080/file/test.txt'<br>
|
||||
window.open('${baseUrl}onlinePreview?url='+encodeURIComponent(base64Encode(url))+'&filePassword=123&page=1&highlightall=kkfileview&watermarkTxt=kkfileview&kkagent=false&key=123');
|
||||
</p>
|
||||
<div class="docs-layout">
|
||||
<aside class="page-toc">
|
||||
<h3>快速导航</h3>
|
||||
<ul>
|
||||
<li><a href="#quick-start">快速开始</a></li>
|
||||
<li><a href="#http-preview">HTTP 文件预览</a></li>
|
||||
<li><a href="#stream-preview">流式接口预览</a></li>
|
||||
<li><a href="#ftp-preview">FTP 预览</a></li>
|
||||
<li><a href="#basic-auth">Basic 鉴权</a></li>
|
||||
<li><a href="#aes-preview">AES 加密</a></li>
|
||||
<li><a href="#extra-params">附加参数</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<div class="docs-content">
|
||||
<section class="doc-card" id="quick-start">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Quick Start</span>
|
||||
<h3>接入思路</h3>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span class="tag brand">推荐入口</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>前端只需要拿到可访问的文件 URL，然后把它编码后拼到 `${baseUrl}onlinePreview` 上即可。对于大多数业务系统，这是最快的落地路径。</p>
|
||||
<ul>
|
||||
<li>普通 HTTP/HTTPS 文件地址：直接 Base64 编码后传入。</li>
|
||||
<li>下载流接口没有后缀名：补充 `fullfilename=xxx.xxx`。</li>
|
||||
<li>鉴权或加密场景：附加 Basic、FTP、AES 等参数。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="doc-card" id="http-preview">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">HTTP / HTTPS</span>
|
||||
<h3>普通文件地址预览</h3>
|
||||
</div>
|
||||
<button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
|
||||
</div>
|
||||
<p>适用于系统已经直接暴露出可下载文件地址的情况。前端只需要编码后打开新窗口。</p>
|
||||
<div class="code-block">
|
||||
<code class="language-javascript">var url = 'http://127.0.0.1:8080/file/test.txt';
|
||||
window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(base64Encode(url)));</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="doc-card" id="stream-preview">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Streaming</span>
|
||||
<h3>流式接口预览</h3>
|
||||
</div>
|
||||
<button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
|
||||
</div>
|
||||
<p>很多业务系统通过 `fileId`、`code` 等参数走统一下载接口，此时原始 URL 没有后缀名，需要额外指定完整文件名。</p>
|
||||
<div class="code-block">
|
||||
<code class="language-javascript">var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1';
|
||||
var previewUrl = originUrl + '&fullfilename=test.txt';
|
||||
window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="doc-card" id="ftp-preview">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">FTP</span>
|
||||
<h3>FTP 资源预览</h3>
|
||||
</div>
|
||||
<button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
|
||||
</div>
|
||||
<p>FTP 如果允许匿名访问，可以直接预览；如果需要认证，则把连接参数拼到 URL 后面传入。</p>
|
||||
<div class="code-block">
|
||||
<code class="language-javascript">// 匿名 FTP
|
||||
var url = 'ftp://127.0.0.1/file/test.txt';
|
||||
window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
|
||||
|
||||
// 认证 FTP
|
||||
var originUrl = 'ftp://127.0.0.1/file/test.txt';
|
||||
var previewUrl = originUrl + '?ftp.control.port=21&ftp.username=admin&ftp.password=123456&ftp.control.encoding=utf8';
|
||||
window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="doc-card" id="basic-auth">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Basic Auth</span>
|
||||
<h3>带 Basic 鉴权的 HTTP 资源</h3>
|
||||
</div>
|
||||
<button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
|
||||
</div>
|
||||
<p>如果文件源本身需要用户名和密码，可以直接把 Basic 鉴权参数拼到地址中，再交给 kkFileView。</p>
|
||||
<div class="code-block">
|
||||
<code class="language-javascript">var originUrl = 'http://127.0.0.1/file/test.txt';
|
||||
var previewUrl = originUrl + '?basic.name=admin&basic.pass=123456';
|
||||
window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(Base64.encode(previewUrl)));</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="doc-card" id="aes-preview">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">AES</span>
|
||||
<h3>前后端同秘钥加密接入</h3>
|
||||
</div>
|
||||
<button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
|
||||
</div>
|
||||
<p>如果不希望明文传递原始文件地址，可以在前端先做 AES 加密，再通过 `encryption=aes` 告知服务端按 AES 方式解密。</p>
|
||||
<div class="code-block">
|
||||
<code class="language-javascript"><script src="${baseUrl}js/crypto-js.js"></script>
|
||||
<script src="${baseUrl}js/aes.js"></script>
|
||||
|
||||
function aesEncrypt(encryptString, key) {
|
||||
var keyBytes = CryptoJS.enc.Utf8.parse(key);
|
||||
var srcs = CryptoJS.enc.Utf8.parse(encryptString);
|
||||
var encrypted = CryptoJS.AES.encrypt(srcs, keyBytes, {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
});
|
||||
return encrypted.toString();
|
||||
}
|
||||
|
||||
var key = '1234567890123456';
|
||||
var url = 'http://127.0.0.1/file/test.txt';
|
||||
window.open('${baseUrl}onlinePreview?url=' + encodeURIComponent(aesEncrypt(url, key)) + '&encryption=aes');</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="doc-card" id="extra-params">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Parameters</span>
|
||||
<h3>常用附加参数</h3>
|
||||
</div>
|
||||
<button class="copy-btn" type="button" onclick="copyCode(this)">复制代码</button>
|
||||
</div>
|
||||
<p>这些参数都应该在原始 URL 编码完成之后，再附加到预览地址后面。</p>
|
||||
<ul>
|
||||
<li>`filePassword`：加密文件的密码。</li>
|
||||
<li>`page`：指定预览页码。</li>
|
||||
<li>`highlightall`：关键字高亮。</li>
|
||||
<li>`watermarkTxt`：动态水印文本。</li>
|
||||
<li>`forceUpdatedCache=true`：强制刷新缓存。</li>
|
||||
<li>`kkagent=true`：需要 kkFileView 代理跨域时启用。</li>
|
||||
<li>`usePasswordCache=true`：开启密码缓存。</li>
|
||||
<li>`key`：实例启用秘钥后传入访问秘钥。</li>
|
||||
</ul>
|
||||
<div class="code-block">
|
||||
<code class="language-javascript">var url = 'http://127.0.0.1:8080/file/test.txt';
|
||||
window.open(
|
||||
'${baseUrl}onlinePreview?url=' +
|
||||
encodeURIComponent(base64Encode(url)) +
|
||||
'&filePassword=123' +
|
||||
'&page=1' +
|
||||
'&highlightall=kkfileview' +
|
||||
'&watermarkTxt=kkfileview' +
|
||||
'&kkagent=false' +
|
||||
'&key=123'
|
||||
);</code>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if (window.hljs) {
|
||||
document.querySelectorAll('.code-block code').forEach(function (block) {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
}
|
||||
|
||||
function copyCode(button) {
|
||||
var code = button.parentNode.parentNode.querySelector('code').innerText;
|
||||
var originalText = button.textContent;
|
||||
navigator.clipboard.writeText(code).then(function () {
|
||||
button.textContent = '已复制';
|
||||
setTimeout(function () {
|
||||
button.textContent = originalText;
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,72 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>赞助开源</title>
|
||||
<title>kkFileView 赞助开源</title>
|
||||
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/theme.css"/>
|
||||
<link rel="stylesheet" href="css/main-pages.css"/>
|
||||
<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
|
||||
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<body class="app-shell">
|
||||
<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="https://kkview.cn" target='_blank'>kkFileView</a>
|
||||
<a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
|
||||
</div>
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="./index">首页</a></li>
|
||||
<li><a href="./integrated">接入说明</a></li>
|
||||
<li><a href="./record">版本发布记录</a></li>
|
||||
<li class="active"><a href="./sponsor">赞助开源</a></li>
|
||||
<li><a href="./contact">技术支持</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container theme-showcase" role="main">
|
||||
<#-- 接入说明 -->
|
||||
<div class="page-header">
|
||||
<h1>赞助开源</h1>
|
||||
<ul style="font-size: 16px;">
|
||||
<li>kkFileView 开源至今已 6 个年头，积累 <a target="_blank" href="https://gitee.com/kekingcn/file-online-preview">Gitee(16.9K)</a>、<a target="_blank" href="https://github.com/kekingcn/kkFileView">GitHub(8k)</a> 多的 star</li>
|
||||
<li>kkFileView 被广泛应用于金融、教育、银行、政务、计算机等行业, 不完全统计有 200+ 企业在使用</li>
|
||||
<li>kkFileView 每年的文档站点、演示站点的服务器、CDN 资源, 至少在 1000元以上</li>
|
||||
<li>kkFileView 是一款完全开源的在线预览项目，如果你觉得 kkFileView 对你有帮助，可以通过下面的方式来赞助我们，谢谢！</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 16px; text-align: center;">
|
||||
<img width="400px" height="550px" alt="alipay" src="../images/alipay.jpeg"/> <img width="400px" height="550px" alt="wxpay" src="../images/wxpay.jpeg"/>
|
||||
<div class="page-shell">
|
||||
<div class="container" role="main">
|
||||
<section class="hero-section release-hero">
|
||||
<div class="hero-copy">
|
||||
<span class="eyebrow">Sponsor Open Source</span>
|
||||
<h1 class="hero-title">赞助开源</h1>
|
||||
<p class="hero-subtitle">
|
||||
kkFileView 已持续维护多年，被广泛用于金融、教育、银行、政务和企业内部系统。
|
||||
赞助会直接用于文档站、演示站、服务器和 CDN 等基础开销。
|
||||
</p>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-panel">
|
||||
<strong>多年维护</strong>
|
||||
<span>项目长期迭代，持续补格式、补安全、补性能。</span>
|
||||
</div>
|
||||
<div class="summary-panel">
|
||||
<strong>广泛使用</strong>
|
||||
<span>不完全统计已有 200+ 企业或团队在使用。</span>
|
||||
</div>
|
||||
<div class="summary-panel">
|
||||
<strong>基础成本</strong>
|
||||
<span>文档站、演示站和 CDN 等年成本至少在千元级。</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-row">
|
||||
<span class="tag brand"><a target="_blank" href="https://gitee.com/kekingcn/file-online-preview">Gitee</a></span>
|
||||
<span class="tag brand"><a target="_blank" href="https://github.com/kekingcn/kkFileView">GitHub</a></span>
|
||||
<span class="tag highlight">完全开源</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="sponsor-grid">
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Ways To Sponsor</span>
|
||||
<h3>赞助方式</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p>如果你觉得 kkFileView 对你有帮助，可以通过下面的方式赞助项目，支持它继续长期维护。</p>
|
||||
<ul>
|
||||
<li>kkFileView 开源至今已多年，社区持续反馈并推动演进。</li>
|
||||
<li>项目 star 与使用规模已经证明它不是“玩具 demo”，而是被真实系统接入的基础能力。</li>
|
||||
<li>赞助记录为手动录入，存在周级延迟；如有遗漏，可联系作者补录。</li>
|
||||
</ul>
|
||||
|
||||
<div class="donation-wall">
|
||||
<div class="qr-card">
|
||||
<h4>支付宝</h4>
|
||||
<img alt="支付宝赞助码" src="../images/alipay.jpeg"/>
|
||||
</div>
|
||||
<div class="qr-card">
|
||||
<h4>微信支付</h4>
|
||||
<img alt="微信赞助码" src="../images/wxpay.jpeg"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="doc-card">
|
||||
<div class="doc-card-header">
|
||||
<div>
|
||||
<span class="eyebrow">Sponsor Log</span>
|
||||
<h3>赞助记录</h3>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span class="tag">2023-03-14 开启赞助通道</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>赞助记录为手动维护，如有遗漏，请联系作者补充。</p>
|
||||
<table class="table sponsor-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>赞助人</th>
|
||||
<th>赞助金额</th>
|
||||
<th>赞助时间</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>陈**</td>
|
||||
<td class="sponsor-amount">99</td>
|
||||
<td>2023-03-14</td>
|
||||
<td>首批赞助记录</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>赞助记录</h3>
|
||||
2023-03-14 开启赞助通道，赞助记录为手动录入的，存在周级别延迟，如有遗漏，请联系作者补充
|
||||
<br/>
|
||||
<table class="table table-striped table-bordered">
|
||||
<tr>
|
||||
<th>赞助人</th>
|
||||
<th>赞助金额</th>
|
||||
<th>赞助时间</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>陈**</td>
|
||||
<td>99</td>
|
||||
<td>2023-03-14</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user