当前位置：首页 > news >正文

kkfileview自建cdn引入

news 2025/9/1 9:49:15

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>KKFileView.js 使用示例</title><style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width: 1000px;margin: 0 auto;padding: 20px;background-color: #f5f5f5;}.container {background: white;padding: 30px;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);margin-bottom: 20px;}.example-section {margin-bottom: 30px;padding: 20px;border-left: 4px solid #007bff;background-color: #f8f9fa;}pre {background: #2d3748;color: #e2e8f0;padding: 15px;border-radius: 5px;overflow-x: auto;font-size: 14px;margin: 10px 0;}.demo-box {background: #fff;padding: 20px;border: 1px solid #ddd;border-radius: 5px;margin: 20px 0;}.btn {background: #007bff;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;margin: 5px;}.btn:hover { background: #0056b3; }.btn:disabled { background: #6c757d; cursor: not-allowed; }.btn-success { background: #28a745; }.btn-success:hover { background: #1e7e34; }.cdn-box {background: #f0f8ff;border: 2px solid #007bff;padding: 20px;border-radius: 8px;margin: 20px 0;}.status {margin-top: 10px;padding: 10px;border-radius: 5px;min-height: 20px;background: #f8f9fa;}.status.success {background: #d4edda;color: #155724;border: 1px solid #c3e6cb;}.status.error {background: #f8d7da;color: #721c24;border: 1px solid #f5c6cb;}.status.loading {background: #d1ecf1;color: #0c5460;border: 1px solid #bee5eb;}.file-input {margin: 10px 0;padding: 8px;border: 1px solid #ddd;border-radius: 4px;}.url-input {width: 300px;padding: 8px;margin-right: 10px;border: 1px solid #ddd;border-radius: 4px;}.spinner {display: inline-block;width: 16px;height: 16px;border: 2px solid #f3f3f3;border-radius: 50%;border-top: 2px solid #007bff;animation: spin 1s linear infinite;margin-right: 8px;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style>
</head>
<body><div class="container"><h1>📄 KKFileView.js - 轻量级文件预览库</h1><p>基于kkfile的JavaScript文件预览库，支持100+种文件格式。精简设计，只提供核心预览功能。</p><div class="cdn-box"><h3>🚀 CDN 快速集成</h3><pre><code>&lt;script src="https://yaoqinqin.cn/cdn/kkfileview.min.js"&gt;&lt;/script&gt;</code></pre><p><strong>文件大小限制：10MB</strong> | <strong>体积小巧</strong> | <strong>开箱即用</strong></p></div></div><div class="container"><h2>🎯 核心功能</h2><div class="example-section"><h3>1. 一行代码预览网络文件</h3><pre><code>// 最简单的使用方式
kkQuickPreview('https://example.com/document.pdf');</code></pre></div><div class="example-section"><h3>2. 本地文件上传预览</h3><pre><code>// 获取文件
const file = document.getElementById('fileInput').files[0];// 上传并自动预览
await window.kkfileview.uploadAndPreview(file);// 或者不自动打开，获取预览URL
const result = await window.kkfileview.uploadAndPreview(file, false);
console.log(result.previewUrl);</code></pre></div><div class="example-section"><h3>3. 创建自定义实例</h3><pre><code>// 使用自定义服务器
const viewer = new KKFileView({baseUrl: 'https://your-kkfile-server.com'
});// 预览网络文件
const info = viewer.previewUrl('https://example.com/doc.pdf', false);
console.log(info.previewUrl);</code></pre></div></div><div class="container"><h2>🧪 在线演示</h2><div class="demo-box"><h3>📤 本地文件上传</h3><input type="file" id="localFileInput" class="file-input"><button class="btn" onclick="uploadDemo()">上传预览</button><div style="font-size: 12px; color: #666; margin-top: 5px;">支持所有格式，文件大小10MB以内</div></div><div class="demo-box"><h3>🌐 网络文件预览</h3><input type="text" id="urlInput" placeholder="输入文件URL" class="url-input" value="https://example.com/sample.pdf"><button class="btn btn-success" onclick="urlDemo()">预览</button></div><div id="status" class="status"></div></div><div class="container"><h2>📚 API 文档</h2><div class="example-section"><h3>核心方法</h3><pre><code>// 1. 快速预览（全局方法）
kkQuickPreview(fileUrl)// 2. 实例方法
const viewer = new KKFileView(options);
await viewer.uploadAndPreview(file, autoOpen);
viewer.previewUrl(fileUrl, autoOpen);// 3. 获取支持的文件类型
viewer.getSupportedFileTypes()</code></pre></div><div class="example-section"><h3>返回值格式</h3><pre><code>// uploadAndPreview 返回
{success: true,originalFileName: "document.pdf",fileUrl: "http://kkfile.yaoqinqin.cn:80/demo/document_1234567890_abc123.pdf",previewUrl: "https://kkfile.yaoqinqin.cn/onlinePreview?url=...",fileSize: 1048576
}// previewUrl 返回
{success: true,originalUrl: "https://example.com/document.pdf",previewUrl: "https://kkfile.yaoqinqin.cn/onlinePreview?url=..."
}</code></pre></div></div><!-- 引入CDN库 --><script src="https://yaoqinqin.cn/cdn/kkfileview.min.js"></script><!-- 演示函数 --><script>const status = document.getElementById('status');async function uploadDemo() {const file = document.getElementById('localFileInput').files[0];if (!file) return status.textContent = '请先选择文件';try {status.textContent = '上传中...';await window.kkfileview.uploadAndPreview(file);status.textContent = '✅ 上传成功并已打开预览';} catch (error) {status.textContent = `❌ ${error.message}`;}}function urlDemo() {const url = document.getElementById('urlInput').value.trim();if (!url) return status.textContent = '请输入文件URL';try {kkQuickPreview(url);status.textContent = '✅ 预览已打开';} catch (error) {status.textContent = `❌ ${error.message}`;}}</script></body>
</html>