@web-office/document-editor

一个独立的前端Office文档编辑器组件，支持Word、Excel和PowerPoint文件的预览和编辑。

特性

• 🚀 完全前端化: 基于OnlyOffice SDK，支持完全在浏览器中加载和编辑Office文件
• 🎨 双模式支持: 预览模式和编辑模式，可通过配置自由切换
• 🔧 高度可配置: 支持自定义资源加载路径，可配置CDN地址
• 📦 零依赖: 移除ranuts等第三方依赖，组件完全独立
• 🎯 TypeScript支持: 完整的TypeScript类型定义
• 🖥️ 组件化Loading: Loading状态组件化，不依赖全局状态管理
• 🌐 网络文件支持: 支持从URL直接加载远程Office文件
• ☁️ 云存储集成: 支持保存文件到七牛云等云存储服务
• 📱 响应式设计: 适配不同屏幕尺寸

安装

npm install @web-office/document-editor

快速开始

import { DocumentEditor, createDocumentEditor } from '@web-office/document-editor';

// 方式1: 使用构造函数
const editor = new DocumentEditor({
  containerId: 'editor-container',
  mode: 'edit', // 'preview' | 'edit'
  fileUrl: 'https://example.com/document.docx',
  onLoad: () => {
    console.log('Document loaded successfully');
  },
  onError: (error) => {
    console.error('Failed to load document:', error);
  },
  onSave: (file, fileName) => {
    console.log('Document saved:', fileName);
    // 可以在这里集成云存储上传
    uploadToQiniu(file, fileName);
  }
});

// 方式2: 使用便捷函数
const editor2 = createDocumentEditor({
  containerId: 'editor-container-2',
  mode: 'preview',
  resources: {
    cdn: 'https://your-cdn.com'
  }
});

七牛云上传集成

组件支持将保存的文档自动上传到七牛云存储。你需要在HTML页面中引入七牛云SDK：

<!-- 七牛云SDK CDN -->
<script src="https://unpkg.com/[email protected]/dist/qiniu.min.js"></script>

<script type="module">
  import { DocumentEditor } from './dist/index.es.js';

  const editor = new DocumentEditor({
    containerId: 'editor-container',
    onSave: async (file, fileName) => {
      // 检查七牛云SDK是否加载
      if (typeof window.qiniu === 'undefined') {
        console.error('七牛云SDK未加载');
        return;
      }

      const mime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
      const blob = new Blob([await file.arrayBuffer()], { type: mime });
      const key = fileName.endsWith('.docx') ? fileName : `${fileName}.docx`;

      const putExtra = { fname: key, mimeType: [mime] };
      const config = { region: 'z2' }; // 华南地区

      const observable = window.qiniu.upload(blob, key, uptoken, putExtra, config);
      const subscription = observable.subscribe({
        next: (res) => console.log('上传进度:', res.total),
        error: (err) => console.error('上传失败:', err),
        complete: (res) => console.log('上传成功:', res)
      });
    }
  });
</script>

配置选项

DocumentEditorOptions

| 参数 | 类型 | 默认值 | 描述 | |------|------|--------|------| | containerId | string | - | 编辑器容器的ID | | mode | 'preview' \| 'edit' | 'preview' | 编辑器模式 | | fileUrl | string | - | 要加载的文件URL | | onLoad | () => void | - | 文档加载成功回调 | | onError | (error: Error) => void | - | 错误处理回调 | | onSave | (file: Blob, fileName: string) => void | - | 保存文档回调 |

资源配置

setResourceConfig({
  cdn: 'https://your-cdn.com', // 可选：CDN基础URL
  sdk: {
    word: '/sdkjs/word/sdk-all.js',
    cell: '/sdkjs/cell/sdk-all.js',
    slide: '/sdkjs/slide/sdk-all.js',
    common: '/sdkjs/common/AllFonts.js'
  },
  fonts: '/fonts/',
  images: {
    docFormats: '/img/doc-formats/',
    icons: '/img/icon/',
    loadMask: '/img/load-mask/',
    toolbar: '/img/toolbar/'
  },
  webApps: '/web-apps/',
  wasm: {
    x2t: '/wasm/x2t/x2t.js'
  }
});

API 方法

DocumentEditor 实例方法

• loadFile(file: File): 加载本地文件
• loadFromUrl(url: string): 从URL加载文件
• createNew(extension: string): 创建新文档
• saveToLocal(): 保存到本地
• setMode(mode: 'preview' | 'edit'): 切换编辑模式
• destroy(): 销毁编辑器实例

支持的文件格式

• Word: .docx, .doc, .odt, .rtf, .txt
• Excel: .xlsx, .xls, .ods, .csv
• PowerPoint: .pptx, .ppt, .odp

浏览器兼容性

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！