在React中使用StimulSoft报表查看器加载二进制数据

现有代码问题修正 #

你的代码存在两个核心问题：

1. 二进制数据未转换为StimulSoft可识别的格式
2. Viewer渲染时的DOM引用语法不完整

完整实现方案 #

1. 二进制数据格式转换 #

StimulSoft的StiReport.load()支持直接加载Uint8Array格式的二进制数据，如果你的数据来自后端接口（Blob/ArrayBuffer类型），需先做格式转换：

// 示例：从后端获取二进制报表数据并转换
async function getReportBinaryData() {
  const res = await fetch('/your-report-api');
  const blob = await res.blob();
  const arrayBuffer = await blob.arrayBuffer();
  return new Uint8Array(arrayBuffer);
}

2. React组件完整代码 #

使用React的useRef获取DOM容器，在useEffect中初始化Viewer（确保DOM已挂载）：

import { useRef, useEffect } from 'react';

export default function StimulsoftReportViewer() {
  const viewerContainer = useRef(null);

  useEffect(() => {
    if (!viewerContainer.current) return;

    // 初始化报表实例
    const report = new Stimulsoft.Report.StiReport();
    
    // 加载二进制数据（替换为你的实际数据）
    getReportBinaryData().then(binaryData => {
      report.load(binaryData);

      // 配置Viewer选项
      const viewerOptions = new Stimulsoft.Viewer.StiViewerOptions();
      viewerOptions.toolbar.showSendEmailButton = true;
      viewerOptions.appearance.height = '85vh';

      // 初始化并渲染Viewer
      const viewer = new Stimulsoft.Viewer.StiViewer(viewerOptions, 'StiViewer', false);
      viewer.report = report;
      viewer.renderHtml(viewerContainer.current);

      // 组件卸载时销毁Viewer，避免内存泄漏
      return () => viewer.destroy();
    });
  }, []);

  return <div ref={viewerContainer}></div>;
}

3. 关键注意事项 #

• 如果你的二进制数据是Base64字符串，可直接传入report.load(base64String)，无需转换为Uint8Array
• 确保项目已正确引入StimulSoft的依赖包及相关样式资源
• 组件卸载时必须调用viewer.destroy()，防止内存泄漏

内容的提问来源于stack exchange，提问作者meysamanhari