feat: 更新PDF转换工具，支持导出为Word文档

修改了index.html以更新标题和描述，增强了用户界面，添加了导出为Word文档的功能。更新了README.md以反映新功能，增加了使用方法和功能特点的描述。同时，调整了CSS样式以支持新的导出选项，确保用户体验流畅。修复了LICENSE文件的格式问题。

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/) - 图标库
 

cssjs/css/style.css

@@ -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 {

cssjs/js/docx.esm.js

@@ -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); 

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';
+  }
+}

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,6 +75,17 @@
           </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>
@@ -67,10 +95,18 @@
                 <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>