使用资源重定位符

ActiveReportsJS 提供了子报表控件，可在当前报表中复用或是钻取报表。 如果使用以模块的方式加载 或 以JSON 数据的方式展示报表，关于子报表或钻取报表是无法自动在路径下找到引用的文件的。也是需要根据引用的id 返回对应的报表定义文件 除此之外，报表使用 主题 需要在运行时指定。 open 方法的第二个可选参数，是个对象，可以包含Resource Locator 实现，示例如下:

// eslint-disable import/no-webpack-loader-syntax
import mainReport from '!json-loader!../reports/MainReport.rdlx-json';
import subReport from '!json-loader!../reports/Subreport.rdlx-json';
import drillthroughReport from '!json-loader!../reports/DrillthroughReport.rdlx-json';

this.reportViewer.open("MainReport", {
  ResourceLocator: {
    getResource: (resourceId: string) => {
      switch (resourceId) {
        case "MainReport": return mainReport;
        case "Subreport": return subReport;
        case "DrillThroughReport": return drillthroughReport;
        case "Theme": return fetch("assets/themes/light-theme.rdlx-json-theme").then(response => response.json());
      }
    },
  },
});

如果您需要运行时加载报表定义，也可以通过PageReport对象的load 方法 加载。示例代码如下：

const report = new GC.ActiveReports.Core.PageReport();
await report.load("MainReport", {
    resourceLocator: {
        getResource: (resourceId) => {
          return fetch("assets/" + resourceId).then(response => response.json());
        },
      },
);

getResource 函数可以返回报表定义对象或主题文件对象或 Promise 对象也可以解决以上问题。

更多资料可参考 资源重定位示例。