批注（Comments）是 Excel 中用于对单元格内容进行补充说明的重要工具，常用于数据审核、协作备注等场景。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成批注的添加、读取、编辑与删除操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

本文介绍几个常用功能点：

• 添加批注
• 读取批注内容
• 编辑批注内容
• 删除批注

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

添加批注

添加批注同时可以携带作者信息，便于识别批注的来源。

function App() {
  const addCommentWithAuthor = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

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

    // 将字体和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'CommentsSample.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 获取要添加批注的单元格
    const range = sheet.Range.get('C1');

    // 设置作者和批注内容
    const author = 'E-iceblue';
    const text = '这是一个示例，展示如何添加带可编辑作者属性的批注。';

    // 向单元格添加批注并设置属性
    const comment = range.AddComment();
    comment.Width = 200;
    comment.IsVisible = true;
    comment.Text = author + ':\n' + text;

    // 为批注中的作者名称设置字体样式
    const font = workbook.CreateFont();
    font.FontName = 'Arial';
    font.KnownColor = xlsModule.ExcelColors.Black;
    font.IsBold = true;
    comment.RichText.SetFont(0, author.length, font);

    // 保存工作簿
    const outputFileName = 'AddCommentWithAuthor_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    workbook.Dispose();

    // 从 VFS 读取生成的文件并触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    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>Add Comment With Author</h1>
      <button onClick={addCommentWithAuthor}>Start</button>
    </div>
  );
}

export default App;

运行后，单元格 C1 上会出现一个包含作者名称和批注文本的批注。

读取批注内容

通过 CellRange.Comment 属性可以读取单元格上的批注。

function App() {
  const readComment = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

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

    // 将 Excel 文件载入 VFS
    const inputFileName = 'CommentsSample.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 获取批注文本
    const builder = [];
    builder.push(sheet.Range.get('A1').Comment.Text + '\n\t');
    builder.push(sheet.Range.get('A2').Comment.Text);

    // 将批注内容保存为 txt 文件
    const outputFileName = 'ReadComment_output.txt';
    window.dotnetRuntime.Module.FS.writeFile(outputFileName, builder.join('\n'));
    workbook.Dispose();

    // 从 VFS 读取生成的文件并触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'text/plain' });
    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>Read Comment</h1>
      <button onClick={readComment}>Start</button>
    </div>
  );
}

export default App;

读取A1，A2单元格的批注内容

编辑批注内容

通过 Comments.get(0) 按索引获取批注，然后修改其文本内容。

function App() {
  const editComment = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

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

    // 将字体和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'CommentsSample.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 获取第一个批注
    const comment = sheet.Comments.get(0);

    // 编辑批注内容
    comment.Text = '该批注已由 Spire.XLS 编辑。';

    // 保存工作簿
    const outputFileName = 'EditExcelComment_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    workbook.Dispose();

    // 从 VFS 读取生成的文件并触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    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>Edit Excel Comment</h1>
      <button onClick={editComment}>Start</button>
    </div>
  );
}

export default App;

编辑A1的批注内容

删除批注

通过 Comments.Clear 方法可以删除工作表中的所有批注。

function App() {
  const removeComment = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

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

    // 将字体和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'CommentsSample.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 获取第一个工作表的全部批注
    const comments = workbook.Worksheets.get(0).Comments;

    // 清除批注，也可以使用 comments.RemoveAt(0) 按索引进行删除
    comments.Clear();

    // 保存工作簿
    const outputFileName = 'RemoveComment_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    workbook.Dispose();

    // 从 VFS 读取生成的文件并触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    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>Remove Comment</h1>
      <button onClick={removeComment}>Start</button>
    </div>
  );
}

export default App;

删除批注后

常见问题

添加批注后批注不可见

原因：添加批注后未设置 IsVisible 属性为 true，批注默认处于隐藏状态。

解决：添加批注后设置 comment.IsVisible = true，即可使批注在工作表中显示。

读取批注时得到空内容

原因：目标单元格上不存在批注，或者使用了错误的单元格引用。

解决：确认目标单元格已添加批注，并通过 sheet.Range.get('A1').Comment 等方式访问批注内容。

获取免费许可证

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