React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React JavaScript HTML导出为Word

React结合JavaScript前端实现将HTML导出Word文档

作者：Eiceblue

本文介绍了使用 JavaScript 库在 React 项目中实现 HTML 到 Word 文档转换的完整流程,该方案基于WebAssembly技术,完全在浏览器端运行,无需后端服务参与,希望对大家有所帮助

在 Web 应用开发中，经常会遇到需要将 HTML 内容导出为 Word 文档的场景。传统方案通常依赖后端服务进行转换，增加 了服务器压力与网络开销。Spire.Doc for JavaScript 基于 WebAssembly 技术，允许开发者直接在浏览器端完成 HTML 到 Word 文档的转换，全程无需后端介入，兼具高性能与良好的隐私安全性。

本文将介绍如何在 React 项目中集成 Spire.Doc for JavaScript 库，并实现 HTML 文件到 DOCX 格式的完整转换流程。

一、技术概述

Spire.Doc for JavaScript 是一款纯前端 Word 文档处理库，底层通过 WebAssembly 运行，支持在浏览器环境中创建、编辑、转换 Word 文档。其 HTML 转 Word 能力支持解析常见的 HTML 标签与内联样式，输出标准的 Office Open XML 格式文档。

核心特性：

二、环境准备与文件部署作

1. 安装 NPM 包

npm i spire.office

2. 静态资源部署

安装后，将以下文件复制到 React 项目的 public 目录，确保构建后能直接通过网络访问：

同时新建两个资源目录：

如果 HTML 包含中文，必须额外加载中文字体文件如 SimSun.ttf 或 Microsoft YaHei.ttf，否则会出现字符缺失。

三、分步实现转换功能

整个实现流程可分为 4 个核心步骤：加载 WASM 模块 → 注入资源到虚拟文件系统 → 执行格式转换 → 触发浏览器下载。

步骤 1：异步加载 WASM 模块

WASM 模块体积较大，需要在组件挂载时异步初始化。我们通过 useEffect 触发加载，加载完成后将模块实例存入状态，供后续转换使用。

核心处理逻辑：

const [wasmModule, setWasmModule] = useState(null);

useEffect(() => {
  (async () => {
    try {
      const publicUrl = process.env.PUBLIC_URL || '';
      // 动态加载 Spire.Doc 主脚本
      const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.js`);
      const rawModule = spireModule.default || spireModule;
      
      // 初始化 WASM 运行时
      window.wasmModule = typeof rawModule === 'function'
        ? await rawModule({ 
            locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p 
          })
        : rawModule;
      
      setWasmModule(window.wasmModule);
    } catch (error) {
      console.error('WASM 模块加载失败:', error);
    }
  })();
}, []);

步骤 2：资源注入虚拟文件系统

WASM 运行在独立的沙箱环境中，自带一套虚拟文件系统（VFS），可以理解为浏览器内的「模拟磁盘」。所有参与转换的文件（HTML 源文件、字体文件）都必须先写入 VFS，文档引擎才能读取。

使用 FetchFileToVFS 方法即可将网络文件写入 VFS：

// 加载字体文件到 VFS 的字体目录
await window.spire.FetchFileToVFS('CALIBRI.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`);

// 加载待转换的 HTML 文件到 VFS 根目录
const inputFileName = 'sample.html';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

注意：字体文件放入 /Library/Fonts/ 目录，文档引擎才会自动扫描并使用。

步骤 3：加载 HTML 并转换为 Word

资源准备完成后，只需三行核心代码即可完成转换：

  1. 创建文档实例
  2. 以 HTML 格式加载源文件
  3. 保存为 DOCX 格式
const wasmAPI = window.wasmModule.spiredoc;
// 创建文档对象
const doc = new wasmAPI.Document();

// 加载 HTML 文件，跳过严格校验以提升兼容性
doc.LoadFromFile({
  fileName: inputFileName,
  fileFormat: wasmAPI.FileFormat.Html,
  validationType: wasmAPI.XHTMLValidationType.None
});

// 保存为 Word 文档到虚拟文件系统
const outputFileName = 'HtmlToWord.docx';
doc.SaveToFile({
  fileName: outputFileName,
  fileFormat: wasmAPI.FileFormat.Docx
});

其中 validationType: None 配置会跳过严格的 XHTML 语法校验，对非标准 HTML 的兼容性更好，适合大多数业务场景。

步骤 4：导出文件并触发下载

转换完成的文档仍保存在虚拟文件系统中，需要读取出来并触发浏览器下载：

// 从虚拟文件系统读取二进制数据
const fileBuffer = window.dotnetRuntime.Module.FS.readFile(outputFileName);
// 封装为 Blob 对象
const fileBlob = new Blob([fileBuffer], {
  type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});

// 动态创建下载链接
const url = URL.createObjectURL(fileBlob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
document.body.appendChild(a);
a.click();

// 清理 DOM 与内存
document.body.removeChild(a);
URL.revokeObjectURL(url);

// 释放文档对象，避免 WASM 内存泄漏
doc.Dispose();

四、完整 HTML 转 Word 代码

以下是整合后的完整 React 组件代码，可直接复制使用：

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

function HtmlToWordConverter() {
  const [wasmModule, setWasmModule] = useState(null);

  // 组件挂载时加载 WASM 模块
  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.js`);
        const rawModule = spireModule.default || spireModule;
        
        window.wasmModule = typeof rawModule === 'function'
          ? await rawModule({ 
              locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p 
            })
          : rawModule;
        
        setWasmModule(window.wasmModule);
      } catch (error) {
        console.error('Spire.Doc 模块加载失败:', error);
      }
    })();
  }, []);

  // 执行 HTML 转 Word
  const handleConvert = async () => {
    const wasmAPI = window.wasmModule.spiredoc;
    if (!wasmAPI) return;

    try {
      // 1. 加载字体文件
      await window.spire.FetchFileToVFS(
        'CALIBRI.ttf', 
        '/Library/Fonts/', 
        `${process.env.PUBLIC_URL}/static/font/`
      );

      // 2. 加载 HTML 源文件
      const inputFileName = 'sample1.html';
      await window.spire.FetchFileToVFS(
        inputFileName, 
        '', 
        `${process.env.PUBLIC_URL}/static/data/`
      );

      // 3. 执行格式转换
      const doc = new wasmAPI.Document();
      doc.LoadFromFile({
        fileName: inputFileName,
        fileFormat: wasmAPI.FileFormat.Html,
        validationType: wasmAPI.XHTMLValidationType.None
      });

      const outputFileName = 'HtmlToWord.docx';
      doc.SaveToFile({
        fileName: outputFileName,
        fileFormat: wasmAPI.FileFormat.Docx
      });

      // 4. 触发浏览器下载
      const fileBuffer = window.dotnetRuntime.Module.FS.readFile(outputFileName);
      const fileBlob = new Blob([fileBuffer], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      });

      const url = URL.createObjectURL(fileBlob);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click();

      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      doc.Dispose();
    } catch (err) {
      console.error('转换失败:', err);
    }
  };

  return (
    <div style={{ textAlign: 'center', padding: '60px 20px' }}>
      <h1>HTML 转 Word 文档（React 前端实现）</h1>
      <button 
        onClick={handleConvert} 
        disabled={!wasmModule}
        style={{ padding: '10px 24px', fontSize: '16px', cursor: 'pointer' }}
      >
        {wasmModule ? '开始转换' : '模块加载中...'}
      </button>
    </div>
  );
}

export default HtmlToWordConverter;

运行：

  1. 启动项目：执行 npm start 启动开发服务，页面加载完成后，转换按钮会从禁用状态变为可点击。
  2. 触发转换：点击开始转换按钮，处理完成后浏览器会自动下载生成的 Word 文档。

五、总结

以上示例提供的 HTML 转 Word 方案，将文档处理能力完全前置到浏览器端，既降低了服务端资源消耗，也提升了响应速度与数据安全性。

在 React 项目中，只需完成「模块初始化 → 资源注入 → 格式转换 → 文件导出」四步核心操作，即可快速实现高质量的文档转换。该方案适用于富文本编辑器导出、报表导出、在线合同生成等多种业务场景。

如果需要更复杂的文档处理能力，还可以基于该库扩展页眉页脚设置、水印添加、多文档合并、表格格式化等功能。

到此这篇关于React结合JavaScript前端实现将HTML导出Word文档的文章就介绍到这了,更多相关React JavaScript HTML导出为Word内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文