用JavaScript在React中實現Word文檔和Markdown互轉 Detail - javascript,react,word,markdown,轉換大丸子 Blog

在現代Web開發的世界裏，React作為構建用户界面的領先庫，經常需要處理各種類型的數據轉換和展示任務。將Word文檔與Markdown文件相互轉換的能力不僅能夠增強用户體驗，還能極大地提高內容管理的效率。這種互轉功能對於那些需要頻繁更新內容或協作編輯的平台尤為重要，比如博客、技術文檔網站或是在線教育平台。通過直接在React應用中實現這一功能，開發者可以為用户提供更加無縫的編輯體驗，使得無論是習慣使用可視化編輯工具還是純文本編輯器的用户都能輕鬆貢獻內容。這不僅能促進團隊內部不同角色間的合作，也方便了最終用户根據自身偏好選擇最適合自己的工作方式。本文講介紹如何使用JavaScript在React中實現Word文檔和Markdown的互相轉換。

用JavaScript將Word文檔轉換為Markdown
用JavaScript將Markdown轉換為Word文檔

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

用JavaScript將Word文檔轉換為Markdown

Spire.Doc for JavaScript提供了一個WebAssembly模塊，該模塊能夠從 VFS（虛擬文件系統）加載Word文檔，並將其轉換為Markdown格式。我們可以通過將文檔獲取到VFS、使用Document.LoadFromFile()方法加載它們，並使用Document.SaveToFile()方法將其保存為 Markdown 來實現這種轉換。包括以下步驟：

加載 Spire.Doc.Base.js 文件以初始化 WebAssembly 模塊。
使用 wasmModule.FetchFileToVFS() 方法將 Word 文檔獲取到虛擬文件系統中。
使用 wasmModule.Document.Create() 方法在 WebAssembly 模塊中創建一個 Document 實例。
使用 Document.LoadFromFile() 方法將 Word 文檔加載到 Document 實例中。
將文檔轉換為 Markdown 格式，並使用 Document.SaveToFile() 方法將其保存到 VFS 中。
讀取並下載文件，或根據需要使用文件。

代碼示例

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

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);
      }
    };

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

    // 將 script 添加到文檔的 body 中
    document.body.appendChild(script);

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

  // 將 Word 轉換為 Markdown 的函數
  const ConvertHTMLStringToPDF = async () => {
    if (wasmModule) {
      // 指定輸入和輸出文件名
      const inputFileName = 'Sample.docx';
      const outputFileName = 'WordToMarkdown.md';

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

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

      // 加載 Word 文檔
      doc.LoadFromFile(inputFileName);

      // 將文檔保存為 Markdown 文件
      doc.SaveToFile({fileName: outputFileName, fileFormat: wasmModule.FileFormat.Markdown});

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

      // 讀取 markdown 文件
      const mdContent = await wasmModule.FS.readFile(outputFileName)

      // 生成 Blob 對象並觸發下載
      const blob = new Blob([mdContent], {type: 'text/plain'});
      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>使用 JavaScript 和 React 將 Word 轉換為 Markdown</h1>
        <button onClick={ConvertHTMLStringToPDF} disabled={!wasmModule}>
          轉換並下載
        </button>
      </div>
  );
}

export default App;

結果

用JavaScript將Markdown轉換為Word文檔

Document.LoadFromFile()方法也可以通過指定文件格式參數為wasmModule.FileFormat.Markdown來加載Markdown文件。然後，我門可以使用Document.SaveToFile()方法將Markdown文件導出為Word文檔。
對於Markdown字符串，我們可以使用wasmModule.FS.writeFile()方法將它們作為Markdown文件寫入虛擬文件系統中，然後將其轉換為 Word 文檔。
詳細步驟如下：

加載 Spire.Doc.Base.js 文件以初始化 WebAssembly 模塊。
使用 wasmModule.FetchFileToVFS() 方法將所需的字體文件加載到虛擬文件系統中。
導入 Markdown 內容：
對於文件：使用 wasmModule.FetchFileToVFS() 方法將 Markdown 文件加載到 VFS 中。
對於字符串：通過 wasmModule.FS.writeFile() 方法將 Markdown 內容寫入 VFS。
在 WebAssembly 模塊中通過 wasmModule.Document.Create() 方法實例化一個 Document 對象。
使用 Document.LoadFromFile({ filename: string, fileFormat: wasmModule.FileFormat.Markdown }) 方法將 Markdown 文件加載到 Document 實例中。
將 Markdown 文件轉換為 Word 文檔，並使用 Document.SaveToFile({ filename: string, fileFormat:wasmModule.FileFormat.Docx2019 }) 方法將其保存到 VFS 中。
從 VFS 中檢索並下載生成的 Word 文件，或根據需要進一步處理。

代碼示例

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

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);
      }
    };

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

    // 將 script 添加到文檔的 body 中
    document.body.appendChild(script);

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

  // 將 Markdown 轉換為 Word 的函數
  const ConvertHTMLStringToPDF = async () => {
    if (wasmModule) {
      // 指定輸出文件名
      const outputFileName = 'MarkdownStringToWord.docx';

      // 將所需的字體文件獲取到 VFS
      await wasmModule.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);

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

      // 將 Markdown 文件獲取到 VFS 並加載到 Document 實例中
      // await wasmModule.FetchFileToVFS('MarkdownExample.md', '', `${process.env.PUBLIC_URL}/`);
      // doc.LoadFromFile({ fileName: 'MarkdownExample.md', fileFormat: wasmModule.FileFormat.Markdown });

      // 定義 Markdown 字符串
      const markdownString = '# Project Aurora: Next-Gen Climate Modeling System *\n' +
          '## Overview\n' +
          'A next-generation climate modeling platform leveraging AI to predict regional climate patterns with 90%+ accuracy. Built for researchers and policymakers.\n' +
          '### Key Features\n' +
          '- * Real-time atmospheric pattern recognition\n' +
          '- * Carbon sequestration impact modeling\n' +
          '- * Custom scenario simulation builder\n' +
          '- * Historical climate data cross-analysis\n' +
          '\n' +
          '## Sample Usage\n' +
          '| Command | Description | Example Output |\n' +
          '|---------|-------------|----------------|\n' +
          '| `region=asia` | Runs climate simulation for Asia | JSON with temperature/precipitation predictions |\n' +
          '| `model=co2` | Generates CO2 impact visualization | Interactive 3D heatmap |\n' +
          '| `year=2050` | Compares scenarios for 2050 | Tabular data with Δ values |\n' +
          '| `format=netcdf` | Exports data in NetCDF format | .nc file with metadata |'

      // 將 Markdown 字符串寫入 VFS 中的文件
      await wasmModule.FS.writeFile('Markdown.md', markdownString, {encoding: 'utf8'})

      // 從 VFS 加載 Markdown 文件
      doc.LoadFromFile({ fileName: 'Markdown.md', fileFormat: wasmModule.FileFormat.Markdown });

      // 將文檔保存為 Word 文件
      doc.SaveToFile({fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2019});

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

      // 讀取 Word 文件
      const outputWordFile = await wasmModule.FS.readFile(outputFileName)

      // 生成 Blob 對象並觸發下載
      const blob = new Blob([outputWordFile], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
      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>使用 JavaScript 和 React 將 Markdown 轉換為 Word</h1>
        <button onClick={ConvertHTMLStringToPDF} disabled={!wasmModule}>
          轉換並下載
        </button>
      </div>
  );
}

export default App;

結果

本文介紹瞭如何用JavaScript在React中實現Word文檔轉換為Markdown，以及Markdown轉換為Word文檔。

大丸子 Blog

@dawanzi_6278b06ec111c

Tags

Javascript (735)

數據庫 (310)

Python (289)

react (167)

HTML (113)

SQL (72)

c# (66)

.net (57)

Json (41)

excel (39)

python3.x (33)

圖片 (28)

Stories

用JavaScript在React中實現Word文檔和Markdown互轉 - Stories Detail

用JavaScript將Word文檔轉換為Markdown

用JavaScript將Markdown轉換為Word文檔

Add a new Comments