初步可看版本

2025-04-17 16:34:20 +08:00
parent 2686740704
commit 5e143d9755
8 changed files with 1733 additions and 1558 deletions
@@ -0,0 +1,57 @@
+// 简单测试docx-preview能否正常工作
+import { renderAsync } from 'docx-preview';
+
+async function testDocxPreview() {
+  try {
+    // DOCX文件URL
+    const fileUrl = "https://dev-xc-enroll.oss-cn-guangzhou.aliyuncs.com/uploads/7840-230620112939.docx";
+    console.log("正在获取文件:", fileUrl);
+    
+    // 获取文件
+    const response = await fetch(fileUrl);
+    if (!response.ok) {
+      throw new Error(`网络请求失败: ${response.status} ${response.statusText}`);
+    }
+    console.log("文件下载成功，准备解析");
+    
+    // 转换为ArrayBuffer
+    const buffer = await response.arrayBuffer();
+    console.log("获取到ArrayBuffer，长度:", buffer.byteLength);
+    
+    // 创建容器
+    const container = document.getElementById('docx-container');
+    if (!container) {
+      throw new Error("找不到容器元素");
+    }
+    
+    // 渲染文档
+    console.log("开始渲染文档...");
+    await renderAsync(buffer, container, null, {
+      className: "docx-viewer",
+      inWrapper: true,
+      ignoreWidth: false,
+      ignoreHeight: false
+    });
+    
+    console.log("文档渲染成功");
+  } catch (error) {
+    console.error("文档渲染失败:", error);
+  }
+}
+
+// 页面加载完成后执行
+window.addEventListener('DOMContentLoaded', () => {
+  const app = document.getElementById('app');
+  if (app) {
+    // 创建容器
+    app.innerHTML = `
+      <div style="width: 100%; height: 100vh; display: flex; flex-direction: column;">
+        <h1>测试 docx-preview</h1>
+        <div id="docx-container" style="flex: 1; border: 1px solid #ccc; overflow: auto;"></div>
+      </div>
+    `;
+    
+    // 执行测试
+    testDocxPreview();
+  }
+});