用JavaScript在React中实现Word文档和Markdown互转

在现代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 来实现这种转换。包括以下步骤：

1. 加载 Spire.Doc.Base.js 文件以初始化 WebAssembly 模块。
2. 使用 wasmModule.FetchFileToVFS() 方法将 Word 文档获取到虚拟文件系统中。
3. 使用 wasmModule.Document.Create() 方法在 WebAssembly 模块中创建一个 Document 实例。
4. 使用 Document.LoadFromFile() 方法将 Word 文档加载到 Document 实例中。
5. 将文档转换为 Markdown 格式，并使用 Document.SaveToFile() 方法将其保存到 VFS 中。
6. 读取并下载文件，或根据需要使用文件。

代码示例

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 文档。
详细步骤如下：

1. 加载 Spire.Doc.Base.js 文件以初始化 WebAssembly 模块。
2. 使用 wasmModule.FetchFileToVFS() 方法将所需的字体文件加载到虚拟文件系统中。
3. 导入 Markdown 内容：
4. 对于文件：使用 wasmModule.FetchFileToVFS() 方法将 Markdown 文件加载到 VFS 中。
5. 对于字符串：通过 wasmModule.FS.writeFile() 方法将 Markdown 内容写入 VFS。
6. 在 WebAssembly 模块中通过 wasmModule.Document.Create() 方法实例化一个 Document 对象。
7. 使用 Document.LoadFromFile({ filename: string, fileFormat: wasmModule.FileFormat.Markdown }) 方法将 Markdown 文件加载到 Document 实例中。
8. 将 Markdown 文件转换为 Word 文档，并使用 Document.SaveToFile({ filename: string, fileFormat:wasmModule.FileFormat.Docx2019 }) 方法将其保存到 VFS 中。
9. 从 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文档。