Snowz
85142d373e
添加了完整的PDF转图片工具的前端实现，包括HTML、CSS、JavaScript代码。该工具允许用户在浏览器中安全地将PDF文件转换为图片，支持单页导出或合并为单张长图，并提供了实时预览功能。所有处理均在本地完成，无需上传文件到服务器，确保用户数据安全。
94 lines
3.7 KiB
HTML
94 lines
3.7 KiB
HTML
<!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> |