只需幾行代碼，你就能在瀏覽器中完美預(yù)覽 Word 文檔，甚至連表格樣式、頁眉頁腳都原汁原味地呈現(xiàn)出來。

本文使用 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);
    // 創(chuàng)建一個新的 window 對象用于展示內(nèi)容，用于新窗口打開
    const previewWindow = window.open("", "_blank");
    if (!previewWindow) {
      alert("請允許彈出窗口以預(yù)覽文檔");
      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");
  }}
>
  預(yù)覽docx
</Button>;

• 預(yù)覽效果:
  預(yù)覽.png

4. 優(yōu)缺點

• 優(yōu)點：效果很贊！文檔分頁顯示，目錄、頁眉頁腳、表格邊框樣式都完美呈現(xiàn)。

• 缺點：不過也有些小坑：

  • 文檔特別大時，渲染速度會變慢
  • 一些復(fù)雜的 Word 功能可能顯示不完美

5. API

// 將文檔渲染到指定元素
renderAsync （
    document：Blob  |  ArrayBuffer  |  Uint8Array ， //可以是 JSZip.loadAsync 支持的任何類型
    bodyContainer：HTMLElement ， //用于渲染文檔內(nèi)容的元素，
    styleContainer：HTMLElement ， //用于渲染文檔樣式、數(shù)字、字體的元素。如果為 null，則使用 bodyContainer。
    options：{ 
        className：string  =  “docx” ， //默認(rèn)和文檔樣式類的類名/前綴
        inWrapper：boolean  =  true ， //啟用圍繞文檔內(nèi)容的包裝器渲染
        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 ，則圖像、字體等將轉(zhuǎn)換為 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 >

/// ==== 實驗性/內(nèi)部 API === 
// 此 API 可用于在渲染之前修改文檔
// renderAsync = parseAsync + renderDocument

// 解析文檔并返回內(nèi)部文檔對象
parseAsync ( 
    document : Blob  |  ArrayBuffer  |  Uint8Array , 
    options : Options 
) : Promise < WordDocument >

// 將內(nèi)部文檔對象渲染到指定容器中
renderDocument ( 
    wordDocument : WordDocument , 
    bodyContainer : HTMLElement , 
    styleContainer : HTMLElement , 
    options : Options 
) : Promise < void >