只需几行代码，你就能在浏览器中完美预览 Word 文档，甚至连表格样式、页眉页脚都原汁原味地呈现出来。

本文使用 docx-preview 插件来源

1. 安装

npm install docx-preview

2. 使用

新增 docxPreview.ts 文件

import { renderAsync } from "docx-preview";

export const previewDocx = async (fileUrl: string) => {
  try {
    // 获取文件
    const response = await fetch(fileUrl);
    const docxBlob = await response.blob();
    console.log("获取到的文件:", docxBlob);
    // 创建一个新的 window 对象用于展示内容，用于新窗口打开
    const previewWindow = window.open("", "_blank");
    if (!previewWindow) {
      alert("请允许弹出窗口以预览文档");
      return;
    }

    // 渲染到页面上
    const container = previewWindow.document.body!;
    await renderAsync(docxBlob, container, undefined, {
      className: "custom-docx", // 自定义CSS类名前缀
      inWrapper: true, // 是否使用包装容器
      ignoreWidth: false, // 是否忽略页面宽度
      ignoreHeight: false, // 是否忽略页面高度
      breakPages: true, // 是否分页显示
      renderHeaders: true, // 是否显示页眉
      renderFooters: true, // 是否显示页脚
      renderFootnotes: true, // 是否显示脚注
      renderEndnotes: true, // 是否显示尾注
      renderComments: true, // 是否显示评论
      useBase64URL: false, // 使用Base64还是ObjectURL处理资源
    });

    console.log("文档渲染成功！");
  } catch (error) {
    console.error("渲染文档时出错:", error);
  }
};

说明：const previewWindow = window.open("", "_blank"); 用作于新窗口打开

3. 使用

<Button
  onClick={() => {
    previewDocx("http://localhost:5173/src/assets/file/AI_100016299002.docx");
  }}
>
  预览docx
</Button>;

• 预览效果:
  预览.png

4. 优缺点

• 优点：效果很赞！文档分页显示，目录、页眉页脚、表格边框样式都完美呈现。

• 缺点：不过也有些小坑：

  • 文档特别大时，渲染速度会变慢
  • 一些复杂的 Word 功能可能显示不完美

5. API

// 将文档渲染到指定元素
renderAsync （
    document：Blob  |  ArrayBuffer  |  Uint8Array ， //可以是 JSZip.loadAsync 支持的任何类型
    bodyContainer：HTMLElement ， //用于渲染文档内容的元素，
    styleContainer：HTMLElement ， //用于渲染文档样式、数字、字体的元素。如果为 null，则使用 bodyContainer。
    options：{ 
        className：string  =  “docx” ， //默认和文档样式类的类名/前缀
        inWrapper：boolean  =  true ， //启用围绕文档内容的包装器渲染
        hideWrapperOnPrint：boolean  =  false ， //在打印时禁用包装器样式
        ignoreWidth：boolean  =  false ， //禁用渲染页面宽度
        ignoreHeight：boolean  =  false ， //禁用渲染页面高度
        ignoreFonts：boolean  =  false ， //禁用字体渲染
        breakPages：boolean  =  true ， //启用分页分页符
        ignoreLastRenderedPageBreak：boolean  =  true ， //禁用 lastRenderedPageBreak 元素上的分页
        experiment：boolean  =  false ， //启用实验性功能（制表位计算）
        trimXmlDeclaration：boolean  =  true ， //如果为 true ，则在解析之前将从 xml 文档中删除 xml 声明
        useBase64URL：boolean  =  false ， //如果为 true ，则图像、字体等将转换为 base 64 URL，否则使用 URL.createObjectURL 
        renderChanges：false ， //启用文档更改的实验性渲染（插入/删除）
        renderHeaders：true ， //启用页眉渲染
        renderFooters：true ， //启用页脚渲染
        renderFootnotes：true， //启用脚注渲染
        renderEndnotes : true ， //启用尾注渲染
        renderComments : false ， //启用实验性评论渲染
        renderAltChunks : true ， //启用 altChunks (html 部分) 渲染
        debug : boolean  =  false ， //启用附加日志记录
    } ) : Promise < WordDocument >

/// ==== 实验性/内部 API === 
// 此 API 可用于在渲染之前修改文档
// renderAsync = parseAsync + renderDocument

// 解析文档并返回内部文档对象
parseAsync ( 
    document : Blob  |  ArrayBuffer  |  Uint8Array , 
    options : Options 
) : Promise < WordDocument >

// 将内部文档对象渲染到指定容器中
renderDocument ( 
    wordDocument : WordDocument , 
    bodyContainer : HTMLElement , 
    styleContainer : HTMLElement , 
    options : Options 
) : Promise < void >