Snowz
2565754d83
修改了index.html以更新标题和描述，增强了用户界面，添加了导出为Word文档的功能。更新了README.md以反映新功能，增加了使用方法和功能特点的描述。同时，调整了CSS样式以支持新的导出选项，确保用户体验流畅。修复了LICENSE文件的格式问题。
130 lines
5.3 KiB
HTML
130 lines
5.3 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转换为图片或Word文档" />
|
||
<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" />
|
||
<link rel="shortcut icon" href="Pdf.svg">
|
||
<!-- 先加载依赖库 -->
|
||
<script>
|
||
// 添加完整的 Buffer polyfill
|
||
if (typeof window.Buffer === 'undefined') {
|
||
window.Buffer = {
|
||
from: function(data, encoding) {
|
||
if (typeof data === 'string') {
|
||
return new Uint8Array(data.split('').map(c => c.charCodeAt(0)));
|
||
}
|
||
return new Uint8Array(data);
|
||
},
|
||
isBuffer: function(obj) {
|
||
return obj instanceof Uint8Array;
|
||
}
|
||
};
|
||
}
|
||
</script>
|
||
<script src="cssjs/js/docx.min.js"></script>
|
||
<script src="cssjs/js/FileSaver.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<div class="header">
|
||
<h1>PDF转换工具</h1>
|
||
<p>安全、高效地将PDF文件转换为高质量图片或Word文档，所有处理均在浏览器中完成</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="export-type-selector mb-3">
|
||
<div class="btn-group" role="group" aria-label="导出类型选择">
|
||
<input type="radio" class="btn-check" name="export-type" id="export-image" autocomplete="off" checked>
|
||
<label class="btn btn-outline-primary" for="export-image"><i class="bi bi-file-earmark-image"></i> 导出为图片</label>
|
||
|
||
<input type="radio" class="btn-check" name="export-type" id="export-word" autocomplete="off">
|
||
<label class="btn btn-outline-primary" for="export-word"><i class="bi bi-file-earmark-word"></i> 导出为Word</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="image-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>
|
||
|
||
<div id="word-options" style="display: none;">
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" id="preserve-layout-switch" checked>
|
||
<label class="form-check-label" for="preserve-layout-switch">尽量保留原始布局</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ms-auto mt-3">
|
||
<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://ckk.photo8.site/Photo8/pdf2img" target="_blank">GitHub</a></p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 使用本地JS文件，注意type="module"属性 -->
|
||
<script type="module" src="cssjs/js/main.js"></script>
|
||
</body>
|
||
</html> |