博客 / 詳情

返回

React程序中用JavaScript轉換Word文檔為HTML

將Word文檔轉換為HTML格式可以方便內容創作者能夠利用熟悉的Word文檔編輯環境來打造適合網絡展示的內容，或是將Word文檔內容更好地嵌入到網頁中，提高內容的可維護性和更新效率。通過使用JavaScript與React，開發者可以在客户端瀏覽器中實現直接將Word文檔轉換為HTML的功能，從而簡化了開發工作流，減少加載時間和服務器成本。本文將介紹如何使用JavaScript在React應用中實現Word文檔到HTML格式的轉換。

  • 用JavaScript將Word文檔轉換為HTML格式
  • 將Word文檔轉換為嵌入CSS和圖片的HTML文件
  • 轉換Word文檔為HTML格式並自定義轉換選項

本文所使用的方法需要用到Spire.Doc for JavaScript，NPM：npm install spire.doc。

用JavaScript將Word文檔轉換為HTML格式

我們需要先載入Spire.Doc.Base.js文件以初始化WASM模塊。在轉換過程中，主要需要用到Document.LoadFromFile()方法從文件載入Word文檔，然後使用Document.SaveToFile()方法將其轉換為HTML格式並保存為文件到VFS中。以下是詳細操作步驟：

  • 導入所需模塊。
  • 加載Spire.Doc.Base.js文件以初始化WebAssembly模塊。
  • 使用wasmModule.FetchFileToVFS()方法將Word文件加載到虛擬文件系統。
  • 使用wasmModule.Document.Create()方法在WASM模塊中創建一個Document實例。
  • 使用Document.LoadFromFile()方法將Word文檔加載到Document實例中。
  • 使用Document.SaveToFile({ fileName: string, fileFormat: wasmModule.FileFormat.Html })方法將Word文檔轉換為HTML格式。
  • 打包並下載結果文件，或根據需要採取其他操作。
  • 釋放資源。

代碼示例

import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';

function App() {

  // 用於存儲加載的WASM模塊的狀態
  const [wasmModule, setWasmModule] = useState(null);

  // useEffect鈎子，在組件掛載時加載WASM模塊
  useEffect(() => {
    const loadWasm = async () => {
      try {

        // 從全局window對象訪問Module和spiredoc
        const { Module, spiredoc } = window;

        // 在運行時初始化時設置wasmModule狀態
        Module.onRuntimeInitialized = () => {
          setWasmModule(spiredoc);
        };
      } catch (err) {

        // 記錄加載過程中發生的任何錯誤
        console.error('加載WASM模塊失敗:', err);
      }
    };

    // 創建一個腳本元素加載WASM JavaScript文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
    script.onload = loadWasm;

    // 將腳本添加到文檔主體中
    document.body.appendChild(script);

    // 清理函數，在組件卸載時移除腳本
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // 將Word文檔轉換為HTML格式的函數
  const WordToHTMLAndZip = async () => {
    if (wasmModule) {
      // 指定輸入文件名和輸出文件夾名稱
      const inputFileName = '示例.docx';
      const outputFolderName = 'WordToHTMLOutput';

      // 獲取輸入文件並將其添加到VFS
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // 創建Document類的實例
      const doc = wasmModule.Document.Create();
      // 加載Word文檔
      doc.LoadFromFile({ fileName: inputFileName });

      // 將Word文檔保存為HTML格式到輸出文件夾
      doc.SaveToFile({ fileName: `${outputFolderName}/document.html`, fileFormat: wasmModule.FileFormat.Html });

      // 釋放資源
      doc.Dispose();

      // 創建一個新的JSZip對象
      const zip = new JSZip();

      // 遞歸函數將目錄及其內容添加到ZIP文件
      const addFilesToZip = (folderPath, zipFolder) => {
        const items = wasmModule.FS.readdir(folderPath);
        items.filter(item => item !== "." && item !== "..").forEach((item) => {
          const itemPath = `${folderPath}/${item}`;

          try {
            // 嘗試讀取文件數據
            const fileData = wasmModule.FS.readFile(itemPath);
            zipFolder.file(item, fileData);
          } catch (error) {
            if (error.code === 'EISDIR') {
              // 如果是目錄，創建一個新文件夾並遞歸進入
              const zipSubFolder = zipFolder.folder(item);
              addFilesToZip(itemPath, zipSubFolder);
            } else {
              // 處理其他錯誤
              console.error(`處理 ${itemPath} 時出錯:`, error);
            }
          }
        });
      };

      // 將輸出文件夾中的所有文件添加到ZIP文件
      addFilesToZip(outputFolderName, zip);

      // 生成並下載ZIP文件
      zip.generateAsync({ type: 'blob' }).then((content) => {
        const url = URL.createObjectURL(content);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${outputFolderName}.zip`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      });
    }
  };

  return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>使用React中的JavaScript將Word文件轉換為HTML並作為ZIP下載</h1>
        <button onClick={WordToHTMLAndZip} disabled={!wasmModule}>
          轉換並下載
        </button>
      </div>
  );
}

export default App;

Word文檔：
React Word轉HTML

轉換出的HTML：
JavaScript Word轉換為HTML

將Word文檔轉換為嵌入CSS和圖片的HTML文件

在進行轉換前，我們可以通過設置Document.HtmlExportOptions.CssStyleSheetType屬性和Document.HtmlExportOptions.ImageEmbedded屬性來設置在轉換時將CSS文件和圖片嵌入到HTML文件中，從而實現Word文檔到單個HTML文件的轉換。以下是操作步驟示例：

  • 導入所需模塊。
  • 加載Spire.Doc.Base.js文件以初始化WebAssembly模塊。
  • 使用wasmModule.FetchFileToVFS()方法將Word文件加載到虛擬文件系統。
  • 使用wasmModule.Document.Create()方法在WASM模塊中創建一個Document實例。
  • 使用Document.LoadFromFile()方法將Word文檔加載到Document實例中。
  • 設置Document.HtmlExportOptions.CssStyleSheetType屬性為wasmModule.CssStyleSheetType.Internal，將CSS樣式嵌入到生成的HTML文件中。
  • 設置Document.HtmlExportOptions.ImageEmbedded屬性為true，將圖片嵌入到生成的HTML文件中。
  • 使用Document.SaveToFile({ fileName: string, fileFormat: wasmModule.FileFormat.Html })方法將Word文檔轉換為包含嵌入CSS和圖片的HTML文件。
  • 下載生成的HTML文件或根據需要採取其他操作。
  • 釋放資源。

代碼示例

import React, { useState, useEffect } from 'react';

function App() {

  // 用於存儲加載的WASM模塊的狀態
  const [wasmModule, setWasmModule] = useState(null);

  // useEffect鈎子，在組件掛載時加載WASM模塊
  useEffect(() => {
    const loadWasm = async () => {
      try {
        const { Module, spiredoc } = window;
        Module.onRuntimeInitialized = () => {
          setWasmModule(spiredoc);
        };
      } catch (err) {
        console.error('加載WASM模塊失敗:', err);
      }
    };

    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
    script.onload = loadWasm;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // 將Word文檔轉換為HTML格式的函數
  const WordToHTMLAndZip = async () => {
    if (wasmModule) {

      // 指定輸入文件名和輸出文件名
      const inputFileName = 'Sample.docx';
      const outputFileName = 'ConvertedDocument.html';

      // 獲取輸入文件並將其添加到VFS
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // 創建Document類的實例
      const doc = wasmModule.Document.Create();

      // 加載Word文檔
      doc.LoadFromFile({ fileName: inputFileName });

      // 在HTML文件中嵌入CSS文件
      doc.HtmlExportOptions.CssStyleSheetType = wasmModule.CssStyleSheetType.Internal;

      // 在HTML文件中嵌入圖像
      doc.HtmlExportOptions.ImageEmbedded = true;

      // 將Word文檔保存為HTML格式
      doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Html });

      // 釋放資源
      doc.Dispose();

      // 從VFS中讀取HTML文件
      const htmlFileArray = wasmModule.FS.readFile(outputFileName);

      // 從HTML文件數組生成Blob並觸發下載
      const blob = new Blob([new Uint8Array(htmlFileArray)], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>使用React中的JavaScript將Word轉換為HTML文件</h1>
        <button onClick={WordToHTMLAndZip} disabled={!wasmModule}>
          轉換並下載
        </button>
      </div>
  );
}

export default App;

轉換Word文檔為HTML格式並自定義轉換選項

Document.HtmlExportOptions屬性下還有多個其他屬性可以對轉換選項進行設置，如設置CSS文件名、圖片路徑、是否包含頁眉頁腳等。下表列出了屬性及其功能：

屬性 描述
CssStyleSheetType 指定HTML CSS樣式表的類型（External或Internal）。
CssStyleSheetFileName 指定HTML CSS樣式表文件的名稱。
ImageEmbedded 指定是否在HTML代碼中使用Data URI嵌入圖片。
ImagesPath 指定導出HTML中圖片的文件夾路徑。
UseSaveFileRelativePath 指定圖片文件路徑是否相對於HTML文件路徑。
HasHeadersFooters 指定是否在導出的HTML中包含頁眉和頁腳。
IsTextInputFormFieldAsText 指定是否將文本輸入表單字段以文本形式導出到HTML。
IsExportDocumentStyles 指定是否將文檔樣式導出到HTML的<head>部分。

以下是操作步驟示例：

  • 導入所需模塊。
  • 加載Spire.Doc.Base.js文件以初始化WebAssembly模塊。
  • 使用wasmModule.FetchFileToVFS()方法將Word文件加載到虛擬文件系統。
  • 使用wasmModule.Document.Create()方法在WASM模塊中創建一個Document實例。
  • 使用Document.LoadFromFile()方法將Word文檔加載到Document實例中。
  • 通過Document.HtmlExportOptions屬性自定義轉換選項。
  • 使用Document.SaveToFile({ fileName: string, fileFormat: wasmModule.FileFormat.Html })方法將Word文檔轉換為HTML格式。
  • 打包並下載結果文件，或根據需要採取其他操作。
  • 釋放資源。

代碼示例

import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';

function App() {

  // 用於存儲加載的WASM模塊的狀態
  const [wasmModule, setWasmModule] = useState(null);

  // useEffect鈎子，在組件掛載時加載WASM模塊
  useEffect(() => {
    const loadWasm = async () => {
      try {

        // 從全局window對象訪問Module和spiredoc
        const { Module, spiredoc } = window;

        // 在運行時初始化時設置wasmModule狀態
        Module.onRuntimeInitialized = () => {
          setWasmModule(spiredoc);
        };
      } catch (err) {

        // 記錄加載過程中發生的任何錯誤
        console.error('加載WASM模塊失敗:', err);
      }
    };

    // 創建一個腳本元素加載WASM JavaScript文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Doc.Base.js`;
    script.onload = loadWasm;

    // 將腳本添加到文檔主體中
    document.body.appendChild(script);

    // 清理函數，在組件卸載時移除腳本
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // 將Word文檔轉換為HTML格式的函數
  const WordToHTMLAndZip = async () => {
    if (wasmModule) {
      // 指定輸入文件名和基礎輸出文件名
      const inputFileName = 'Sample.docx';
      const baseOutputFileName = 'WordToHTML';
      const outputFolderName = 'WordToHTMLOutput';

      // 獲取輸入文件並將其添加到VFS
      await wasmModule.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/`);

      // 創建Document類的實例
      const doc = wasmModule.Document.Create();

      // 加載Word文檔
      doc.LoadFromFile({ fileName: inputFileName });

      // 取消嵌入CSS文件並設置其名稱
      doc.HtmlExportOptions.CssStyleSheetType = wasmModule.CssStyleSheetType.External;
      doc.HtmlExportOptions.CssStyleSheetFileName = `${baseOutputFileName}CSS.css`;

      // 取消嵌入圖像文件並設置其路徑
      doc.HtmlExportOptions.ImageEmbedded = false;
      doc.HtmlExportOptions.ImagesPath = `/Images`;
      doc.HtmlExportOptions.UseSaveFileRelativePath = true;

      // 設置忽略頁眉和頁腳
      doc.HtmlExportOptions.HasHeadersFooters = false;

      // 設置將表單字段作為文本輸出
      doc.HtmlExportOptions.IsTextInputFormFieldAsText = true;

      // 設置將文檔樣式輸出到<head>部分
      doc.HtmlExportOptions.IsExportDocumentStyles = true;

      // 將Word文檔保存為HTML格式
      doc.SaveToFile({
        fileName: `${outputFolderName}/${baseOutputFileName}.html`,
        fileFormat: wasmModule.FileFormat.Html
      });

      // 釋放資源
      doc.Dispose();

      // 創建一個新的JSZip對象
      const zip = new JSZip();

      // 遞歸函數將目錄及其內容添加到ZIP文件
      const addFilesToZip = (folderPath, zipFolder) => {
        const items = wasmModule.FS.readdir(folderPath);
        items.filter(item => item !== "." && item !== "..").forEach((item) => {
          const itemPath = `${folderPath}/${item}`;

          try {
            // 嘗試讀取文件數據。如果是目錄，將拋出錯誤。
            const fileData = wasmModule.FS.readFile(itemPath);
            zipFolder.file(item, fileData);
          } catch (error) {
            if (error.code === 'EISDIR') {
              // 如果是目錄，創建一個新文件夾並遞歸進入
              const zipSubFolder = zipFolder.folder(item);
              addFilesToZip(itemPath, zipSubFolder);
            } else {
              // 處理其他錯誤
              console.error(`處理 ${itemPath} 時出錯:`, error);
            }
          }
        });
      };

      // 將輸出文件夾的內容添加到ZIP文件
      addFilesToZip(`${outputFolderName}`, zip);

      // 生成並下載ZIP文件
      zip.generateAsync({ type: 'blob' }).then((content) => {
        const url = URL.createObjectURL(content);
        const a = document.createElement("a");
        a.href = url;
        a.download = `${baseOutputFileName}.zip`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      });
    }
  };

  return (
      <div style={{ textAlign: 'center', height: '300px' }}>
        <h1>使用JavaScript在React中將Word文件轉換為HTML並作為ZIP下載</h1>
        <button onClick={WordToHTMLAndZip} disabled={!wasmModule}>
          轉換並下載
        </button>
      </div>
  );
}

export default App;

本文介紹瞭如何使用JavaScript在React應用中轉換Word文檔為HTML文件，提供步驟介紹以及代碼示例。

申請免費License

react , word , jsx , HTML , Javascript
user avatar iot_full_stack 頭像
1 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.