在 React 中使用 JavaScript 创建 Word 文档

在现代 Web 开发中，动态生成 Word 文档的需求日益增长，无论是用于报告导出、合同生成，还是数据归档。借助 Spire.Doc for JavaScript，开发者可以直接在 React 应用中轻松实现专业级 Word 文档的创建与编辑。本文将详细介绍如何通过代码添加标题、段落、图片、列表和表格，并自定义样式，帮助您快速掌握从 React 前端生成标准化文档的核心技巧。

添加标题、小标题和段落到 Word
添加图片到 Word
添加列表到 Word
添加表格到 Word

安装 Spire.Doc for JavaScript

要在 React 应用程序中创建 Word 文档，首先需要通过官网下载 Spire.Doc for JavaScript，或者通过以下 npm 命令安装：

npm i spire.doc

安装完成后，将 Spire.Doc.Base.js 和 Spire.Doc.Base.wasm 文件复制到项目的 public 文件夹中。此外，还需包含所需的字体文件，以确保文本渲染准确。

更多详细信息，请参阅文档：如何在 React 项目中集成 Spire.Doc for JavaScript

在 React 中添加标题、小标题和段落到Word

要为 Word 文档添加标题、小标题和段落，您主要使用 Spire.Doc for JavaScript 提供的 Document 和 Section 类。AddParagraph() 方法用于创建新段落，而 AppendText() 方法则允许您在段落中插入文本。

段落可以通过内置样式（如 Title、Heading1-4）进行格式化，以确保文档结构统一；也可以通过自定义样式设置特定字体、字号和颜色，实现个性化的文档设计。

在 React 中向 Word 文档添加标题、小标题和段落的步骤如下：

导入必要的字体文件到虚拟文件系统（VFS）。
使用 wasmModule.Document.Create() 创建 Document 对象。
通过 Document.AddSection() 在文档中添加新节。
使用 Section.AddParagraph() 向文档添加段落。
通过 Paragraph.ApplyStyle() 为特定段落应用内置样式（如 Title、Heading1、Heading2、Heading3）。
使用 wasmModule.ParagraphStyle.Create() 定义自定义段落样式，并将其应用到指定段落。
将文档保存为 DOCX 文件并触发下载。

JavaScript

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

function App() {

  // 保存加载的 WASM 模块
  const [wasmModule, setWasmModule] = useState(null);

  // 在组件挂载时加载 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 添加文本的函数
  const AddText = async () => {
    if (wasmModule) {

      // 将字体文件加载到虚拟文件系统 (VFS)
      await wasmModule.FetchFileToVFS('simsun.ttc', '/Library/Fonts/',`${process.env.PUBLIC_URL}/`);// 创建一个新文档 const doc = wasmModule.Document.Create();// 添加一个章节 let section = doc.AddSection();// 设置页面边距 section.PageSetup.Margins.All = 60;// 添加标题段落 let title_para = section.AddParagraph();let text_range = title_para.AppendText('这是标题');title_para.ApplyStyle({builtinStyle:wasmModule.BuiltinStyle.Title});text_range.CharacterFormat.FontName = "宋体";// 添加小标题段落 let heading_one = section.AddParagraph();text_range = heading_one.AppendText('这是标题1');heading_one.ApplyStyle({builtinStyle:wasmModule.BuiltinStyle.Heading1});text_range.CharacterFormat.FontName = "宋体";let heading_two = section.AddParagraph();text_range = heading_two.AppendText('这是标题2');heading_two.ApplyStyle({builtinStyle:wasmModule.BuiltinStyle.Heading2});text_range.CharacterFormat.FontName = "宋体";let heading_three = section.AddParagraph();text_range = heading_three.AppendText('这是标题3');heading_three.ApplyStyle({builtinStyle:wasmModule.BuiltinStyle.Heading3});text_range.CharacterFormat.FontName = "宋体";let heading_four = section.AddParagraph();text_range = heading_four.AppendText('这是标题4');heading_four.ApplyStyle({builtinStyle:wasmModule.BuiltinStyle.Heading4});text_range.CharacterFormat.FontName = "宋体";// 添加普通段落 let normal_para = section.AddParagraph();normal_para.AppendText('这是一个段落。');// 创建段落样式，指定字体名称、字体大小和文本颜色 let paragraph_style = wasmModule.ParagraphStyle.Create(doc);paragraph_style.Name = 'newStyle';paragraph_style.CharacterFormat.FontName = '宋体';paragraph_style.CharacterFormat.FontSize = 13;paragraph_style.CharacterFormat.TextColor = wasmModule.Color.get_Blue();// 将样式添加到文档 doc.Styles.Add(paragraph_style);// 将样式应用于段落 normal_para.ApplyStyle(paragraph_style.Name);// 保存文档 const outputFileName = 'output.docx';doc.SaveToFile({fileName:outputFileName,fileFormat:wasmModule.FileFormat.Docx2013});// 创建用于下载文件的 Blob const modifiedFileArray = wasmModule.FS.readFile(outputFileName);const modifiedFile = new Blob([modifiedFileArray],{type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});const url = URL.createObjectURL(modifiedFile);// 触发文件下载 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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>在 React 中向 Word 文档添加文本</h1><button onClick={AddText}disabled={!wasmModule}>生成 </button></div>);}export default App;

运行代码启动 React 应用（访问 localhost:3000）。点击“生成”按钮后，系统将弹出“另存为”窗口，提示您选择文件夹保存输出的 Word 文档。

在 React 中创建 Word

下图展示了生成的 Word 文件截图，其中包含一个标题、多个层级标题和一个普通段落：

在 React 中添加文本到 Word

在 React 中添加图片到 Word

向 Word 文档插入图片需要使用 AppendPicture()方法，该方法允许您将图片添加到特定段落。操作前需先将图片文件加载至虚拟文件系统（VFS），确保图片可被正常插入。

在 React 中向 Word 文档添加图片的步骤：

使用 wasmModule.Document.Create()创建 Document对象。
通过 Document.AddSection()为文档添加新节。
使用 Section.AddParagraph()在节中插入新段落。
调用 Paragraph.AppendPicture()方法将已加载的图片添加至段落。
将文档保存为 DOCX 文件并触发下载。

JavaScript

import React,{useState,useEffect}from 'react';function App(){// 保存加载的 WASM 模块 const [wasmModule,setWasmModule] = useState(null);// 在组件挂载时加载 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 添加图像的函数 const AddImage = async () =>{if (wasmModule){// 将图像文件加载到虚拟文件系统 (VFS) const inputImageFile = 'logo.png';await wasmModule.FetchFileToVFS(inputImageFile,'',`${process.env.PUBLIC_URL}/`);// 创建一个新文档 const doc = wasmModule.Document.Create();// 添加一个章节 let section = doc.AddSection();// 设置页面边距 section.PageSetup.Margins.All = 60;// 添加段落 let image_para = section.AddParagraph();// 向段落中添加图像 image_para.AppendPicture({imgFile:inputImageFile});// 保存文档 const outputFileName = 'output.docx';doc.SaveToFile({fileName:outputFileName,fileFormat:wasmModule.FileFormat.Docx2013});// 创建用于下载文件的 Blob const modifiedFileArray = wasmModule.FS.readFile(outputFileName);const modifiedFile = new Blob([modifiedFileArray],{type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});const url = URL.createObjectURL(modifiedFile);// 触发下载 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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>在 React 中向 Word 文档添加图片</h1><button onClick={AddImage}disabled={!wasmModule}>生成 </button></div>);}export default App;

在 React 中添加图片到 Word

在 React 中添加列表到 Word

要在 Word 文档中创建列表，首先可以使用 ListStyle类定义列表的外观，例如项目符号或编号格式。然后通过 ApplyStyle()方法将定义好的列表样式应用到段落，从而确保多个列表项保持统一的格式样式。

在 React 中为 Word 文档添加列表的操作步骤：

将所需字体文件加载至虚拟文件系统（VFS）。
使用 wasmModule.Document.Create()创建文档对象。
通过 Document.AddSection()为文档添加节。
使用 wasmModule.ListStyle.Create()定义列表样式。
通过 Section.AddParagraph()在节中插入多个段落。
使用 Paragraph.ListFormat.ApplyStyle()为段落应用定义好的列表样式。
将文档保存为 DOCX 格式并触发下载。

JavaScript

import React,{useState,useEffect}from 'react';function App(){// 保存加载的 WASM 模块 const [wasmModule,setWasmModule] = useState(null);// 在组件挂载时加载 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 添加列表的函数 const AddList = async () =>{if (wasmModule){// 将字体文件加载到虚拟文件系统 (VFS) await wasmModule.FetchFileToVFS('simsun.ttc','/Library/Fonts/',`${process.env.PUBLIC_URL}/`);// 创建一个新文档 const doc = wasmModule.Document.Create();// 添加一个章节 let section = doc.AddSection();// 设置页面边距 section.PageSetup.Margins.All = 60;// 定义项目符号列表样式 let list_style = wasmModule.ListStyle.Create(doc,wasmModule.ListType.Bulleted);list_style.Name = 'bulletedList';list_style.Levels.get_Item(0).BulletCharacter = '\u00B7';list_style.Levels.get_Item(0).CharacterFormat.FontName = 'Symbol';list_style.Levels.get_Item(0).CharacterFormat.FontSize = 14;list_style.Levels.get_Item(0).TextPosition = 20;// 将列表样式添加到文档 doc.ListStyles.Add(list_style);// 添加标题段落 let paragraph = section.AddParagraph();let text_range = paragraph.AppendText('水果:');paragraph.Format.AfterSpacing = 5;text_range.CharacterFormat.FontName = '宋体';text_range.CharacterFormat.FontSize = 14;// 向项目符号列表添加项目 const fruits = ['苹果','香蕉','西瓜','芒果'];fruits.forEach(fruit =>{paragraph = section.AddParagraph();let text_range = paragraph.AppendText(fruit);paragraph.ListFormat.ApplyStyle(list_style.Name);paragraph.ListFormat.ListLevelNumber = 0;text_range.CharacterFormat.FontName = '宋体';text_range.CharacterFormat.FontSize = 14;});// 保存文档 const outputFileName = 'output.docx';doc.SaveToFile({fileName:outputFileName,fileFormat:wasmModule.FileFormat.Docx2013});// 创建用于下载文件的 Blob const modifiedFileArray = wasmModule.FS.readFile(outputFileName);const modifiedFile = new Blob([modifiedFileArray],{type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});const url = URL.createObjectURL(modifiedFile);// 触发文件下载 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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>在 React 中向 Word 文档添加列表</h1><button onClick={AddList}disabled={!wasmModule}>生成 </button></div>);}export default App;

在 React 中添加列表到 Word

在 React 中添加表格到 Word

创建表格需使用 AddTable()方法，并通过 ResetCells()指定行列数。表格创建后，可结合 AddParagraph()和 AppendText()方法为单元格添加文本内容。使用 AutoFit()方法可自动根据内容调整表格布局，确保数据呈现整洁有序。

在 React 中实现 Word 表格添加的步骤：

将所需字体文件加载至虚拟文件系统（VFS）。
使用 wasmModule.Document.Create()初始化文档对象。
通过 Document.AddSection()添加文档节。
创建二维数组存储表头和数据内容。
调用 Section.AddTable()创建表格。
使用 Table.ResetCells()根据数据量设定表格行列数。
遍历数据数组，通过 TableCell.AddParagraph()和 Paragraph.AppendText()填充单元格文本。
应用 Table.AutoFit()实现内容自适应调整。
将文档保存为 DOCX 文件并触发下载。

JavaScript

import React,{useState,useEffect}from 'react';function App(){// 保存加载的 WASM 模块 const [wasmModule,setWasmModule] = useState(null);// 在组件挂载时加载 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 添加表格的函数 const AddTable = async () =>{if (wasmModule){// 将字体文件加载到虚拟文件系统 (VFS) await wasmModule.FetchFileToVFS('simsun.ttc','/Library/Fonts/',`${process.env.PUBLIC_URL}/`);// 创建一个新文档 const doc = wasmModule.Document.Create();// 添加一个章节 let section = doc.AddSection();// 设置页面边距 section.PageSetup.Margins.All = 60;// 定义表格数据 let data = [ ['产品','单价','数量','小计'],['A','290','120','34800'],['B','350','110','38500'],['C','680','140','95200'],];// 添加表格 let table = section.AddTable({showBorder:true});// 设置行数和列数 table.ResetCells(data.length,data[0].length);// 将数据写入单元格 for (let r = 0;r <data.length;r++){let data_row = table.Rows.get(r);data_row.Height = 20;data_row.HeightType = wasmModule.TableRowHeightType.Exactly;data_row.RowFormat.BackColor = wasmModule.Color.Empty();for (let c = 0;c <data[r].length;c++){let cell = data_row.Cells.get(c);cell.CellFormat.VerticalAlignment = wasmModule.VerticalAlignment.Middle;let text_range = cell.AddParagraph().AppendText(data[r][c]);text_range.CharacterFormat.FontName = '宋体';text_range.CharacterFormat.FontSize = 14;}}// 自动调整表格大小以适应单元格内容 table.AutoFit(wasmModule.AutoFitBehaviorType.AutoFitToContents);// 保存文档 const outputFileName = 'output.docx';doc.SaveToFile({fileName:outputFileName,fileFormat:wasmModule.FileFormat.Docx2013});// 创建用于下载文件的 Blob const modifiedFileArray = wasmModule.FS.readFile(outputFileName);const modifiedFile = new Blob([modifiedFileArray],{type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});const url = URL.createObjectURL(modifiedFile);// 触发文件下载 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();}};return ( <div style={{textAlign:'center',height:'300px'}}><h1>在 React 中向 Word 文档添加表格</h1><button onClick={AddTable}disabled={!wasmModule}>生成 </button></div>);}export default App;

在 React 中添加表格到 Word

申请临时 License

如果您需要去除生成文档中的评估提示或解除功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。