bash npm install docx-preview --save 
# 或 
yarn add docx-preview 

import React, { useRef } from 'react';
import { renderAsync } from 'docx-preview';

const DocxPreview = () => {
  const previewRef = useRef(null); // 用于掛載預(yù)覽內(nèi)容的容器

  // 處理文件上傳
  const handleFileChange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 驗(yàn)證文件類型
    if (file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
      alert('請(qǐng)上傳 .docx 格式的文件');
      return;
    }

    try {
      // 清空之前的預(yù)覽內(nèi)容
      previewRef.current.innerHTML = '';

      // 解析并渲染 Word 文檔
      await renderAsync(
        file, // 上傳的文件對(duì)象
        previewRef.current, // 掛載預(yù)覽的 DOM 容器
        null, // 配置項(xiàng)（可選）
        {
          // 加載狀態(tài)回調(diào)（可選）
          onLoadStart: () => console.log('開始加載...'),
          onLoadEnd: () => console.log('加載完成'),
        }
      );
    } catch (err) {
      console.error('解析失?。?, err);
      previewRef.current.innerHTML = '文檔解析失敗，請(qǐng)檢查文件是否損壞';
    }
  };

  return (
    <div>
      <input type="file" accept=".docx" onChange={handleFileChange} />
      <div ref={previewRef} style={{ marginTop: 20, minHeight: 300 }} />
    </div>
  );
};

export default DocxPreview;

import React, { useRef, useEffect } from 'react';
import { renderAsync } from 'docx-preview';

const RemoteDocxPreview = () => {
  const previewRef = useRef(null);
  const docUrl = 'https://example.com/files/test.docx'; // 遠(yuǎn)程 .docx 地址

  useEffect(() => {
    const fetchAndRenderDoc = async () => {
      try {
        const response = await fetch(docUrl);
        if (!response.ok) throw new Error('文件請(qǐng)求失敗');

        // 將響應(yīng)轉(zhuǎn)換為 ArrayBuffer（docx-preview 支持的格式）
        const arrayBuffer = await response.arrayBuffer();

        // 渲染文檔
        await renderAsync(arrayBuffer, previewRef.current);
      } catch (err) {
        console.error('加載失?。?, err);
        previewRef.current.innerHTML = '無法加載遠(yuǎn)程文檔';
      }
    };

    fetchAndRenderDoc();
  }, [docUrl]);

  return <div ref={previewRef} style={{ padding: 20 }} />;
};

export default RemoteDocxPreview;

// 示例：自定義配置
const options = {
  className: 'docx-preview', // 給預(yù)覽容器添加自定義類名（用于覆蓋樣式）
  inWrapper: true, // 是否包裹在默認(rèn)容器中（默認(rèn) true）
  ignoreWidth: false, // 是否忽略文檔寬度（默認(rèn) false）
  ignoreHeight: false, // 是否忽略文檔高度（默認(rèn) false）
  ignoreFonts: false, // 是否忽略字體樣式（默認(rèn) false）
  breakPages: true, // 是否分頁（默認(rèn) true）
  ignoreLastRenderedPageBreak: true, // 是否忽略最后一個(gè)分頁符
  experimental: false, // 是否啟用實(shí)驗(yàn)性功能
  trimXmlDeclaration: true, // 是否移除 XML 聲明
  useBase64URL: true, // 是否用 base64 處理圖片
  renderChanges: false, // 是否渲染修訂記錄（默認(rèn) false）
  renderHeaders: true, // 是否渲染頁眉（默認(rèn) true）
  renderFooters: true, // 是否渲染頁腳（默認(rèn) true）
  renderFootnotes: true, // 是否渲染腳注（默認(rèn) true）
  renderEndnotes: true, // 是否渲染尾注（默認(rèn) true）
};

// 使用配置
await renderAsync(file, previewRef.current, options);

/* 示例：調(diào)整預(yù)覽區(qū)域樣式 */
.docx-preview {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 調(diào)整段落樣式 */
.docx-preview p {
  margin: 10px 0;
  line-height: 1.5;
}

/* 隱藏頁眉頁腳（如果需要） */
.docx-preview .header,
.docx-preview .footer {
  display: none;
}