feat: 更新PDF转换工具，支持导出为Word文档
修改了index.html以更新标题和描述，增强了用户界面，添加了导出为Word文档的功能。更新了README.md以反映新功能，增加了使用方法和功能特点的描述。同时，调整了CSS样式以支持新的导出选项，确保用户体验流畅。修复了LICENSE文件的格式问题。
This commit is contained in:
parent
31a1bccb6f
commit
2565754d83
16
README.md
16
README.md
@ -1,24 +1,25 @@
|
||||
# PDF转图片工具
|
||||
# PDF转换工具
|
||||
|
||||
一个纯前端的PDF转图片工具，所有处理均在浏览器中完成，无需上传文件到服务器，保证用户数据安全。
|
||||
一个纯前端的PDF转换工具，支持将PDF转换为图片或Word文档，所有处理均在浏览器中完成，无需上传文件到服务器，保证用户数据安全。
|
||||
|
||||
## 功能特点
|
||||
|
||||
- 🔒 **安全可靠**：所有处理均在本地浏览器中完成，无需上传文件到服务器
|
||||
- 🚀 **高效转换**：快速将PDF文件转换为高质量图片
|
||||
- 🚀 **高效转换**：快速将PDF文件转换为高质量图片或Word文档
|
||||
- 📱 **响应式设计**：适配各种设备屏幕
|
||||
- 🖼️ **多种导出选项**：支持导出单页图片或合并为单张长图
|
||||
- 🖼️ **多种导出选项**：支持导出单页图片、合并为单张长图或转换为Word文档
|
||||
- 🔍 **实时预览**：转换前可预览PDF内容
|
||||
- 📦 **批量处理**：支持多页PDF一次性处理
|
||||
- 📄 **Word转换**：支持将PDF转换为可编辑的Word文档
|
||||
|
||||
## 使用方法
|
||||
|
||||
1. 打开网页应用
|
||||
2. 拖放PDF文件到指定区域或点击"选择文件"按钮
|
||||
3. 等待PDF加载和预览生成
|
||||
4. 选择导出选项（单页图片或合并为单张图片）
|
||||
5. 点击"导出图片"按钮
|
||||
6. 下载生成的图片文件
|
||||
4. 选择导出类型（图片或Word）和相关选项
|
||||
5. 点击"导出文件"按钮
|
||||
6. 下载生成的图片或Word文档
|
||||
|
||||
## 本地部署
|
||||
|
||||
@ -69,6 +70,7 @@ types {
|
||||
- [PDF.js](https://mozilla.github.io/pdf.js/) - Mozilla的PDF渲染库
|
||||
- [JSZip](https://stuk.github.io/jszip/) - 用于创建ZIP文件的JavaScript库
|
||||
- [FileSaver.js](https://github.com/eligrey/FileSaver.js/) - 客户端保存文件的解决方案
|
||||
- [docx](https://github.com/dolanmiu/docx) - 用于生成Word文档的JavaScript库
|
||||
- [Bootstrap 5](https://getbootstrap.com/) - 用于UI组件和响应式设计
|
||||
- [Bootstrap Icons](https://icons.getbootstrap.com/) - 图标库
|
||||
|
||||
|
||||
@ -154,12 +154,26 @@ body {
|
||||
|
||||
.export-options {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.export-options .form-check {
|
||||
margin-right: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.export-type-selector {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
||||
19
cssjs/js/docx.esm.js
Normal file
19
cssjs/js/docx.esm.js
Normal file
@ -0,0 +1,19 @@
|
||||
// 等待 docx.min.js 加载完成
|
||||
const waitForDocx = new Promise((resolve) => {
|
||||
const checkDocx = () => {
|
||||
if (window.docx && window.docx.Document) {
|
||||
resolve();
|
||||
} else {
|
||||
setTimeout(checkDocx, 100);
|
||||
}
|
||||
};
|
||||
checkDocx();
|
||||
});
|
||||
|
||||
// 导出 docx 库的所有必要组件
|
||||
export const Document = waitForDocx.then(() => window.docx.Document);
|
||||
export const Paragraph = waitForDocx.then(() => window.docx.Paragraph);
|
||||
export const ImageRun = waitForDocx.then(() => window.docx.ImageRun);
|
||||
export const HeadingLevel = waitForDocx.then(() => window.docx.HeadingLevel);
|
||||
export const AlignmentType = waitForDocx.then(() => window.docx.AlignmentType);
|
||||
export const Packer = waitForDocx.then(() => window.docx.Packer);
|
||||
21620
cssjs/js/docx.min.js
vendored
Normal file
21620
cssjs/js/docx.min.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
188
cssjs/js/main.js
188
cssjs/js/main.js
@ -1,6 +1,7 @@
|
||||
// 导入依赖库
|
||||
import * as pdfjsLib from './pdf.mjs';
|
||||
import JSZip from './jszip.min.js';
|
||||
import * as docx from './docx.esm.js';
|
||||
|
||||
// 设置PDF.js worker路径
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = 'cssjs/js/pdf.worker.mjs';
|
||||
@ -21,6 +22,11 @@ const previewItems = document.getElementById('preview-items');
|
||||
const exportBtn = document.getElementById('export-btn');
|
||||
const combinePagesSwitch = document.getElementById('combine-pages-switch');
|
||||
const highQualitySwitch = document.getElementById('high-quality-switch');
|
||||
const preserveLayoutSwitch = document.getElementById('preserve-layout-switch');
|
||||
const exportImageRadio = document.getElementById('export-image');
|
||||
const exportWordRadio = document.getElementById('export-word');
|
||||
const imageOptions = document.getElementById('image-options');
|
||||
const wordOptions = document.getElementById('word-options');
|
||||
|
||||
// PDF信息显示元素
|
||||
const pdfNameValue = document.getElementById('pdf-name-value');
|
||||
@ -37,7 +43,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
function initEventListeners() {
|
||||
selectFileBtn.addEventListener('click', () => pdfFileInput.click());
|
||||
pdfFileInput.addEventListener('change', handleFileSelect);
|
||||
exportBtn.addEventListener('click', exportImages);
|
||||
exportBtn.addEventListener('click', handleExport);
|
||||
|
||||
// 导出类型切换
|
||||
exportImageRadio.addEventListener('change', updateExportOptions);
|
||||
exportWordRadio.addEventListener('change', updateExportOptions);
|
||||
|
||||
// 拖放功能
|
||||
uploadArea.addEventListener('dragover', (e) => {
|
||||
@ -65,8 +75,30 @@ function initEventListeners() {
|
||||
});
|
||||
}
|
||||
|
||||
// 其余函数保持不变
|
||||
// ...
|
||||
// 更新导出选项显示
|
||||
function updateExportOptions() {
|
||||
if (exportImageRadio.checked) {
|
||||
imageOptions.style.display = 'block';
|
||||
wordOptions.style.display = 'none';
|
||||
} else {
|
||||
imageOptions.style.display = 'none';
|
||||
wordOptions.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// 处理导出按钮点击
|
||||
function handleExport() {
|
||||
if (!pdfDocument || renderedPages.length === 0) {
|
||||
showError('没有可导出的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
if (exportImageRadio.checked) {
|
||||
exportImages();
|
||||
} else {
|
||||
exportWord();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理文件选择
|
||||
function handleFileSelect(e) {
|
||||
@ -208,10 +240,6 @@ function displayPreviews() {
|
||||
|
||||
// 导出图片
|
||||
function exportImages() {
|
||||
if (!pdfDocument || renderedPages.length === 0) {
|
||||
showError('没有可导出的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
const combinePages = combinePagesSwitch.checked;
|
||||
const highQuality = highQualitySwitch.checked;
|
||||
@ -376,3 +404,149 @@ function resetUI() {
|
||||
previewContainer.style.display = 'none';
|
||||
pdfFileInput.value = '';
|
||||
}
|
||||
|
||||
// 导出为Word文档
|
||||
async function exportWord() {
|
||||
// 显示加载状态
|
||||
loadingContainer.style.display = 'block';
|
||||
document.getElementById('loading-text').textContent = '正在准备导出Word文档...';
|
||||
|
||||
try {
|
||||
// 等待 docx 组件加载完成
|
||||
const Document = await docx.Document;
|
||||
const Paragraph = await docx.Paragraph;
|
||||
const ImageRun = await docx.ImageRun;
|
||||
const HeadingLevel = await docx.HeadingLevel;
|
||||
const AlignmentType = await docx.AlignmentType;
|
||||
const Packer = await docx.Packer;
|
||||
|
||||
// 创建一个新的Word文档
|
||||
const doc = new Document({
|
||||
sections: [{
|
||||
properties: {},
|
||||
children: []
|
||||
}]
|
||||
});
|
||||
|
||||
const preserveLayout = preserveLayoutSwitch.checked;
|
||||
let processedCount = 0;
|
||||
|
||||
// 处理每一页
|
||||
for (let i = 0; i < renderedPages.length; i++) {
|
||||
const page = renderedPages[i];
|
||||
document.getElementById('loading-text').textContent = `正在处理第 ${i + 1}/${renderedPages.length} 页`;
|
||||
|
||||
// 获取页面文本内容
|
||||
const textContent = await pdfDocument.getPage(page.pageNumber).then(pdfPage => {
|
||||
return pdfPage.getTextContent();
|
||||
});
|
||||
|
||||
// 如果保留布局，添加页面图像
|
||||
if (preserveLayout) {
|
||||
// 获取页面图像
|
||||
const pdfPage = await pdfDocument.getPage(page.pageNumber);
|
||||
const viewport = pdfPage.getViewport({ scale: 1.5 });
|
||||
|
||||
// 创建canvas
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
// 填充白色背景
|
||||
context.fillStyle = '#FFFFFF';
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 渲染PDF页面到canvas
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
|
||||
await pdfPage.render(renderContext).promise;
|
||||
|
||||
// 将canvas转换为图像数据
|
||||
const imageData = canvas.toDataURL('image/png');
|
||||
const imageBase64 = imageData.split(',')[1];
|
||||
|
||||
// 将base64转换为Uint8Array
|
||||
const binaryString = atob(imageBase64);
|
||||
const bytes = new Uint8Array(binaryString.length);
|
||||
for (let j = 0; j < binaryString.length; j++) {
|
||||
bytes[j] = binaryString.charCodeAt(j);
|
||||
}
|
||||
|
||||
// 确保数据是Buffer类型
|
||||
const imageBuffer = Buffer.from(bytes);
|
||||
|
||||
// 添加图像到Word文档
|
||||
doc.addSection({
|
||||
properties: {},
|
||||
children: [
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
data: imageBuffer,
|
||||
transformation: {
|
||||
width: 600,
|
||||
height: 600 * (viewport.height / viewport.width)
|
||||
}
|
||||
})
|
||||
]
|
||||
}),
|
||||
new Paragraph({
|
||||
text: `第 ${page.pageNumber} 页`,
|
||||
alignment: AlignmentType.CENTER
|
||||
})
|
||||
]
|
||||
});
|
||||
} else {
|
||||
// 仅提取文本内容
|
||||
let pageText = '';
|
||||
let lastY = -1;
|
||||
|
||||
// 处理文本项
|
||||
textContent.items.forEach(item => {
|
||||
// 如果Y坐标变化，添加换行
|
||||
if (lastY !== -1 && lastY !== item.transform[5]) {
|
||||
pageText += '\n';
|
||||
}
|
||||
|
||||
pageText += item.str;
|
||||
lastY = item.transform[5];
|
||||
});
|
||||
|
||||
// 添加文本到Word文档
|
||||
doc.addSection({
|
||||
properties: {},
|
||||
children: [
|
||||
new Paragraph({
|
||||
text: `第 ${page.pageNumber} 页`,
|
||||
heading: HeadingLevel.HEADING_1,
|
||||
alignment: AlignmentType.CENTER
|
||||
}),
|
||||
new Paragraph({
|
||||
text: pageText
|
||||
})
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
processedCount++;
|
||||
}
|
||||
|
||||
// 生成Word文档
|
||||
document.getElementById('loading-text').textContent = '正在生成Word文档...';
|
||||
const buffer = await Packer.toBlob(doc);
|
||||
|
||||
// 保存文件
|
||||
saveAs(buffer, `${pdfFile.name.replace('.pdf', '')}.docx`);
|
||||
|
||||
// 隐藏加载状态
|
||||
loadingContainer.style.display = 'none';
|
||||
} catch (error) {
|
||||
console.error('Word导出错误:', error);
|
||||
showError('导出Word文档时出错');
|
||||
loadingContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
64
index.html
64
index.html
@ -3,21 +3,38 @@
|
||||
<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>
|
||||
<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">
|
||||
<!-- 先加载 FileSaver.js -->
|
||||
<!-- 先加载依赖库 -->
|
||||
<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文件转换为高质量图片，所有处理均在浏览器中完成</p>
|
||||
<h1>PDF转换工具</h1>
|
||||
<p>安全、高效地将PDF文件转换为高质量图片或Word文档，所有处理均在浏览器中完成</p>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
@ -58,19 +75,38 @@
|
||||
</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 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 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 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 class="ms-auto">
|
||||
<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> 导出图片
|
||||
<i class="bi bi-download"></i> 导出文件
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -84,7 +120,7 @@
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 PDF转图片工具 | <a href="https://ckk.photo8.site/Photo8/pdf2img" target="_blank">GitHub</a></p>
|
||||
<p>© 2025 PDF转换工具 | <a href="https://ckk.photo8.site/Photo8/pdf2img" target="_blank">GitHub</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user