在线编辑doc

jjb.config.js

@@ -76,5 +76,12 @@ module.exports = {
       // 自动注入编译后的文件到public/index.html中
       inject: true,
     },
+    resolve: {
+      // sax 包引用了 Node.js stream 模块，但在浏览器端不可用
+      // sax 内部已有 try-catch 保护，设为 false 可安全忽略
+      fallback: {
+        stream: false,
+      },
+    },
   },
 };

package.json

@@ -26,6 +26,7 @@
     "@cqsjjb/jjb-common-lib": "latest",
     "@cqsjjb/jjb-dva-runtime": "latest",
     "@cqsjjb/jjb-react-admin-component": "latest",
+    "@eigenpal/docx-editor-react": "^1.9.0",
     "@rc-component/motion": "^1.0.0",
     "@rc-component/util": "^1.11.1",
     "ahooks": "^3.9.5",

src/pages/Container/Test/edtior/index.js

@@ -0,0 +1,34 @@
+// App.tsx
+import { useRef, useState } from 'react';
+import { DocxEditor } from '@eigenpal/docx-editor-react';
+import '@eigenpal/docx-editor-react/styles.css';
+export default function App() {
+  const editorRef = useRef(null);
+  const [file, setFile] = useState(null);
+  async function download() {
+    const buffer = await editorRef.current?.save();
+    if (!buffer) return;
+    const blob = new Blob([buffer], {
+      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file?.name ?? 'document.docx';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  return (
+    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ padding: 8, display: 'flex', gap: 8 }}>
+        <input
+          type="file"
+          accept=".docx"
+          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
+        />
+        <button onClick={download}>Download .docx</button>
+      </div>
+      {file && <DocxEditor ref={editorRef} documentBuffer={file} mode="editing" />}
+    </div>
+  );
+}