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文档：

转换出的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