@anohanafes/offline-document-viewer
Version:
🔒 完全离线的多格式文档预览器 - 支持PDF、DOCX、PPTX、XLSX、CSV，按需加载，支持URL预览
142 lines (131 loc) • 6.43 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>离线文档预览器 - 支持PDF/DOCX/PPTX</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/pptx-styles.css">
</head>
<body>
<div class="app-container">
<!-- 头部 -->
<header class="app-header">
<div class="header-content">
<h1>📄 离线文档预览器</h1>
<p>完全本地部署 • 无需网络 • 支持多种格式</p>
</div>
</header>
<!-- 主要内容区域 -->
<main class="main-content">
<!-- 文件上传区域 -->
<section class="upload-section">
<div class="upload-area" id="uploadArea">
<div class="upload-icon">📁</div>
<h3>点击选择文件</h3>
<input type="file" id="fileInput" class="file-input"
accept=".pdf,.docx,.pptx,.doc,.ppt">
<div class="supported-formats">
<span class="format-badge pdf">PDF</span>
<span class="format-badge docx">DOCX</span>
<span class="format-badge pptx">PPTX</span>
</div>
<p class="upload-hint">最大支持50MB文件</p>
</div>
</section>
<!-- 文档信息栏 -->
<section class="document-info" id="documentInfo" style="display: none;">
<div class="info-item">
<span class="info-label">文件名:</span>
<span class="info-value" id="fileName"></span>
</div>
<div class="info-item">
<span class="info-label">文件大小:</span>
<span class="info-value" id="fileSize"></span>
</div>
<div class="info-item">
<span class="info-label">文件类型:</span>
<span class="info-value" id="fileType"></span>
</div>
</section>
<!-- 预览控制栏 -->
<section class="viewer-controls" id="viewerControls" style="display: none;">
<!-- PDF控制 -->
<div class="pdf-controls" id="pdfControls" style="display: none;">
<button class="btn btn-secondary" id="prevPage" disabled>
<span>◀</span> 上一页
</button>
<span class="page-info" id="pageInfo">第 1 页</span>
<button class="btn btn-secondary" id="nextPage">
下一页 <span>▶</span>
</button>
<div class="zoom-controls">
<button class="btn btn-sm" id="zoomOut">🔍-</button>
<span id="zoomLevel">100%</span>
<button class="btn btn-sm" id="zoomIn">🔍+</button>
<button class="btn btn-sm" id="fitWidth">适应宽度</button>
</div>
</div>
<!-- DOCX控制 -->
<div class="docx-controls" id="docxControls" style="display: none;">
<button class="btn btn-secondary" id="docxZoomOut">🔍-</button>
<span id="docxZoomLevel">100%</span>
<button class="btn btn-secondary" id="docxZoomIn">🔍+</button>
<button class="btn btn-secondary" id="docxFitWidth">适应宽度</button>
</div>
<!-- PPTX控制 -->
<!-- <div class="pptx-controls" id="pptxControls" style="display: none;">
<button class="btn btn-secondary" id="pptxPrevSlide" disabled>
<span>◀</span> 上一张
</button>
<span class="slide-info" id="slideInfo">第 1 张 / 共 1 张</span>
<button class="btn btn-secondary" id="pptxNextSlide">
下一张 <span>▶</span>
</button>
<button class="btn btn-primary" id="toggleSlideshow">🎬 幻灯片播放</button>
</div> -->
</section>
<!-- 预览区域 -->
<section class="viewer-area">
<div class="viewer-container" id="viewerContainer">
<div class="welcome-message">
<div class="welcome-icon">📄</div>
<h2>欢迎使用离线文档预览器</h2>
<p>请选择一个文档文件开始预览</p>
<div class="features">
<div class="feature">
<span class="feature-icon">🔒</span>
<span>完全离线</span>
</div>
<div class="feature">
<span class="feature-icon">⚡</span>
<span>快速预览</span>
</div>
<div class="feature">
<span class="feature-icon">🎯</span>
<span>多种格式</span>
</div>
</div>
</div>
</div>
<!-- 加载状态 -->
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
<div class="loading-spinner"></div>
<div class="loading-text">正在处理文档...</div>
</div>
</section>
</main>
<!-- 底部信息 -->
<footer class="app-footer">
<p>🌐 完全离线运行 • 📱 点击选择文件 • 🔐 数据安全</p>
</footer>
</div>
<!-- 基础依赖（必需） -->
<script src="lib/jquery.min.js"></script>
<!-- 动态资源管理器 -->
<script src="js/resource-manager.js"></script>
<script src="js/document-processor-enhancer.js"></script>
<!-- 主应用脚本 -->
<script src="js/document-viewer.js"></script>
</body>
</html>