word文件预览实现

Mammoth 是一个专门用于将 .docx 文件转换为 HTML 的 JavaScript 库。它能够保留大部分文档格式，如段落、标题、列表、表格、图片等。

import mammoth from 'mammoth';

一、文件处理流程

文件读取与转换

js 复制代码

const handleFileUpload = async (e) => {
    const uploadedFile = e.target.files[0];
    
    if (!uploadedFile) return;

    setFile(uploadedFile);
    setLoading(true);
    setError(null);
    setSignatureImage(null); // 清除之前的签名
    
    // 获取文件类型
    const fileExtension = uploadedFile.name.split('.').pop().toLowerCase();
    setFileType(fileExtension);
    
    try {
      // 根据文件类型进行不同处理
      if (fileExtension === 'pdf') {
        
      } else if (['xlsx', 'xls'].includes(fileExtension)) {
        
      } else if (['docx'].includes(fileExtension)) {
        // 处理Word文件，使用mammoth库
        const reader = new FileReader();
        reader.onload = async (e) => {
          try {
            const arrayBuffer = e.target.result;
            const result = await mammoth.convertToHtml({ arrayBuffer });
            setWordContent(result.value);
            setLoading(false);
          } catch (err) {
            console.error('Error rendering Word document:', err);
            setError('Word文档处理失败，请检查文件格式是否正确');
            setLoading(false);
          }
        };
        reader.onerror = () => {
          setError('文件读取失败');
          setLoading(false);
        };
        reader.readAsArrayBuffer(uploadedFile);
      } else {
        setLoading(false);
      }
    } catch (err) {
      console.error('Error processing file:', err);
      setError('文件处理失败');
      setLoading(false);
    }
  };

首先，使用 FileReader 将上传的文件读取为 ArrayBuffer（二进制数据缓冲区）
reader.readAsArrayBuffer(uploadedFile) 开始读取文件
当文件读取完成后，触发 onload 事件并执行回调函数
使用 mammoth.convertToHtml() 方法将 Word 文档的二进制数据转换为 HTML 字符串
这是一个异步操作，使用 await 等待转换完成
转换结果存储在 result.value 中，这是一个包含 HTML 标记的字符串
将 HTML 内容保存到 React 状态 wordContent 中

二、渲染HTML

Word 文档转换为 HTML 后，通过 renderWordPreview 函数渲染到页面：

js 复制代码

// 渲染Word文档内容
const renderWordPreview = () => {
  if (!wordContent) return null;
  
  return (
    <div 
      className="word-preview"
      dangerouslySetInnerHTML={{ __html: wordContent }}
    />
  );
};

检查 wordContent 是否存在，如果不存在则不渲染任何内容
使用 React 的 dangerouslySetInnerHTML 属性将 HTML 字符串直接插入到 DOM 中
dangerouslySetInnerHTML 是 React 提供的替代浏览器 DOM 的 innerHTML 属性的方法

三、优势与限制

优势

客户端处理：所有处理都在浏览器中完成，无需服务器端转换
保留格式：mammoth 能够保留大部分 Word 文档的格式
轻量级：不需要安装 Microsoft Office 或其他重量级软件
跨平台：在任何支持现代浏览器的设备上都能工作

限制

复杂格式支持有限：某些高级 Word 功能（如宏、复杂的公式等）可能无法正确显示
性能：对于非常大或复杂的文档，转换可能会较慢
样式：虽然保留了基本格式，但可能与原始 Word 文档的外观有所不同