在实际文档排版中，文本框是承载独立内容的理想容器——它可以自由定位、不受页面流限制，非常适合用于侧边栏、引述框、产品示意图等场景。而往文本框中插入图片或表格，则是实现丰富布局的常见需求。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接处理 Word 文档，通过虚拟文件系统（VFS）管理字体和文件资源，无需后端服务支持。

本文介绍两个核心功能点：

• 向文本框插入图片
• 向文本框插入表格

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript 的方法。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。

向文本框插入图片

将图片填入文本框是制作产品标签、名片或宣传物料时的常用技巧。Spire.Doc 通过 AppendTextBox 方法创建文本框，然后利用 FillEfects.SetPicture 用图片填充文本框背景。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和图片文件载入 WASM 虚拟文件系统；然后创建文档，添加文本框并设置位置属性，通过填充效果将图片应用到文本框中；最后保存文档并从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

function App() {
  const InsertImageIntoTextBox = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体和图片文件载入 VFS
    const imageFileName = 'Spire.Doc.png';
    await window.spire.FetchFileToVFS(imageFileName, '', `${process.env.PUBLIC_URL}/data/`);

    // 创建文档
    const doc = new docModule.Document();

    // 添加一个节
    let section = doc.AddSection();

    // 添加一个段落
    let paragraph = section.AddParagraph();

    // 在段落中追加一个 220x220 的文本框
    let tb = paragraph.AppendTextBox(220, 220);

    // 设置文本框位置
    tb.Format.HorizontalOrigin = docModule.HorizontalOrigin.Page;
    tb.Format.HorizontalPosition = 50;
    tb.Format.VerticalOrigin = docModule.VerticalOrigin.Page;
    tb.Format.VerticalPosition = 50;

    // 将文本框的填充类型设为图片
    tb.Format.FillEfects.Type = docModule.BackgroundType.Picture;

    // 用图片填充文本框
    tb.Format.FillEfects.SetPicture(imageFileName);

    // 定义输出文件名并保存
    const outputFileName = "InsertImageIntoTextBox_output.docx";
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

    // 释放资源
    doc.Close();
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>向 Word 文本框插入图片</h1>
      <button onClick={InsertImageIntoTextBox}>
        Generate
      </button>
    </div>
  );
}

export default App;

用图片填充文本框后，图片将按文本框尺寸自动适配显示。

向文本框插入表格

在侧边栏或引用区域中嵌入结构化表格数据，是技术文档和报表中常见的需求。Spire.Doc 支持在文本框内创建表格，并通过 textbox.Body.AddTable 方法直接将表格添加到文本框主体中。相比在主文档中创建表格，文本框内的表格可以独立定位，不受页面布局影响。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件载入 WASM 虚拟文件系统；然后创建文档和文本框，通过 textbox.Body.AddTable 添加表格并指定行列数，逐行填充数据并应用样式；最后保存文档并从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

function App() {
  const InsertTableIntoTextBox = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体文件载入 VFS
    await window.spire.FetchFileToVFS('msyh.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // 创建文档
    const doc = new docModule.Document();

    // 添加一个节
    let section = doc.AddSection();

    // 添加一个段落
    let paragraph = section.AddParagraph();

    // 添加一个 300x100 的文本框
    let textbox = paragraph.AppendTextBox(300, 150);

    // 设置文本框位置
    textbox.Format.HorizontalOrigin = docModule.HorizontalOrigin.Page;
    textbox.Format.HorizontalPosition = 140;
    textbox.Format.VerticalOrigin = docModule.VerticalOrigin.Page;
    textbox.Format.VerticalPosition = 50;

    // 在文本框中添加标题文本
    let textboxParagraph = textbox.Body.AddParagraph();
    let textboxRange = textboxParagraph.AppendText("表格 1");
    textboxRange.CharacterFormat.FontName = "微软雅黑";

    // 在文本框中插入表格
    let table = textbox.Body.AddTable({ showBorder: true });

    // 指定表格的行列数
    table.ResetCells(4, 4);

    let data = [
      ["姓名", "年龄", "性别", "编号"],
      ["张三", "28", "男", "0023"],
      ["李四", "30", "男", "0024"],
      ["王五", "26", "女", "0025"]
    ];
    // 向表格填充数据
    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        let tableRange = table.Rows.get_Item(i).Cells.get_Item(j).AddParagraph().AppendText(data[i][j]);
        tableRange.CharacterFormat.FontName = "微软雅黑";
      }
    }

    // 应用表格样式
    table.ApplyStyle({ builtinTableStyle: docModule.DefaultTableStyle.TableColorful2 });

    // 定义输出文件名并保存
    const outputFileName = "InsertTableIntoTextBox_output.docx";
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

    // 释放资源
    doc.Close();
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>向 Word 文本框插入表格</h1>
      <button onClick={InsertTableIntoTextBox}>
        Generate
      </button>
    </div>
  );
}

export default App;

在文本框中创建表格后，表格将包含在文本框内部，可随文本框自由定位。

常见问题

文本框中的图片显示不完整或被裁剪

原因：文本框尺寸与图片宽高比不匹配，创建文本框时指定的尺寸无法完整容纳图片内容。

解决：调整文本框尺寸以匹配图片比例，或选择适合文本框尺寸的图片：

let tb = paragraph.AppendTextBox(400, 300);

文本框中的表格没有显示边框

原因：创建表格时 showBorder 参数未设置或设为 false，导致表格无边框。

解决：创建表格时确认 showBorder 参数为 true：

let table = textbox.Body.AddTable({ showBorder: true });

保存后文本框位置与预期不符

原因：HorizontalOrigin 或 VerticalOrigin 设置不正确，导致定位基准点与预期不同。

解决：根据需求选择合适的原点类型，并结合 HorizontalPosition / VerticalPosition 微调位置：

tb.Format.HorizontalOrigin = docModule.HorizontalOrigin.Page;
tb.Format.HorizontalPosition = 50;
tb.Format.VerticalOrigin = docModule.VerticalOrigin.Page;
tb.Format.VerticalPosition = 50;

获取免费许可证

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