feat: 新增PDF转图片工具的前端实现

添加了完整的PDF转图片工具的前端实现，包括HTML、CSS、JavaScript代码。该工具允许用户在浏览器中安全地将PDF文件转换为图片，支持单页导出或合并为单张长图，并提供了实时预览功能。所有处理均在本地完成，无需上传文件到服务器，确保用户数据安全。
2025-04-13 02:26:28 +08:00
commit 85142d373e
5 changed files with 757 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="description" content="PDF转图片工具 - 在浏览器中安全地将PDF转换为图片" />
+  <title>PDF转图片工具</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="cssjs/css/style.css" />
+</head>
+
+<body>
+  <div class="app-container">
+    <div class="header">
+      <h1>PDF转图片工具</h1>
+      <p>安全、高效地将PDF文件转换为高质量图片，所有处理均在浏览器中完成</p>
+    </div>
+    
+    <div class="card mb-4">
+      <div class="card-header">
+        <i class="bi bi-file-earmark-pdf"></i> 选择PDF文件
+      </div>
+      <div class="card-body">
+        <div id="upload-area" class="upload-area">
+          <i class="bi bi-cloud-arrow-up upload-icon"></i>
+          <h4>拖放PDF文件到这里</h4>
+          <p>或者</p>
+          <button class="btn btn-primary" id="select-file-btn">
+            <i class="bi bi-file-earmark-plus"></i> 选择文件
+          </button>
+          <input type="file" id="pdf-file-input" accept="application/pdf" style="display: none;">
+          <p class="mt-3 text-muted small">最大文件大小: 20MB</p>
+        </div>
+        
+        <div id="loading-container" style="display: none; text-align: center;">
+          <div class="spinner"></div>
+          <p id="loading-text">正在处理PDF文件...</p>
+        </div>
+        
+        <div id="pdf-info-container" style="display: none;" class="mt-4">
+          <div class="pdf-info">
+            <div class="pdf-info-item">
+              <div class="value" id="pdf-name-value">-</div>
+              <div class="label">文件名称</div>
+            </div>
+            <div class="pdf-info-item">
+              <div class="value" id="pdf-size-value">-</div>
+              <div class="label">文件大小</div>
+            </div>
+            <div class="pdf-info-item">
+              <div class="value" id="pdf-pages-value">-</div>
+              <div class="label">总页数</div>
+            </div>
+          </div>
+          
+          <div class="export-options">
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" id="combine-pages-switch">
+              <label class="form-check-label" for="combine-pages-switch">合并为单张图片</label>
+            </div>
+            
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" id="high-quality-switch" checked>
+              <label class="form-check-label" for="high-quality-switch">高质量输出</label>
+            </div>
+            
+            <div class="ms-auto">
+              <button class="btn btn-primary" id="export-btn">
+                <i class="bi bi-download"></i> 导出图片
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div id="preview-container" class="preview-container" style="display: none;">
+      <h3 class="mb-3">预览</h3>
+      <div id="preview-items" class="row"></div>
+    </div>
+    
+    <footer>
+      <p>© 2025 PDF转图片工具 | <a href="https://github.com/xxlllq/pdf2img" target="_blank">GitHub</a></p>
+    </footer>
+  </div>
+
+  <!-- 使用本地JS文件 -->
+  <script src="cssjs/js/pdf.js"></script>
+  <script src="cssjs/js/jszip.min.js"></script>
+  <script src="cssjs/js/FileSaver.min.js"></script>
+  <script src="cssjs/js/main.js"></script>
+</body>
+</html>