如何在前端实现报表钻取，并为子报表运行时绑定数据源

有一些特定情况下，如离线环境，数据由用户本地输入后重组数据在本地形成新的可用数据在展示报表中，这些特殊情况下导致了，我们需要在运行时修改报表数据源。 ActiveReportsJS 报表本身为JSON 结构，因此可以通过读取报表的JSON 结构后，再修改数据源是一个非常好的方法，ActiveReportsJS 提供了运行时修改数据源的实例demo.grapecity.com.cn/activerepor… 但在这种情况下，我们又存在一个问题，当报表发生钻取到子报表操作时，子报表也需要运行时修改数据源，我们便无法通过读取JSON 字串，再去修改子报表的数据源。

此种情况下，可结合 ActiveReportsJS 提供的 resource locator 和内嵌数据集来解决这个需求。 ResourceLocator接口：可实现资源重定向功能，如子报表路径，图片子源，数据源资源，钻取子报表等资源。

1. 创建主子报表，并设置内嵌数据源和数据集，完成报表设计
2. 定义函数，读取主子报表JSON 字串，并修改数据源

  const mainReport = await fetch(
        '/assets/drill-mainreport.rdlx-json'
      ).then((resJson) => resJson.json());
      const mainData = await fetch(
        'https://demodata.grapecity.com/northwind/api/v1/Categories'
      ).then((resJson) => resJson.json());
      mainReport.DataSources[0].ConnectionProperties.ConnectString =
        'jsondata=' + JSON.stringify(mainData);

      const subReport = await fetch(
        '/assets/drill-subreport.rdlx-json'
      ).then((resJson) => resJson.json());
      const subData = await fetch(
        'https://demodata.grapecity.com/northwind/api/v1/Products'
      ).then((resJson) => resJson.json());
      subReport.DataSources[0].ConnectionProperties.ConnectString =
        'jsondata=' + JSON.stringify(subData);

3. 定义resourceLocator, 该接口包含两个方法 getResource, getResourceId 再 getResource 中指定reportViewer.open 方法

const resourceLocator = {
        getResource: function (name) {
          if (name === 'productList.rdlx-json') return subReport;
        },
      };

    };

4. 指定打开主报表，并调用 ResourceeLocator API

this.reportViewer.open(mainReport, { ResourceLocator: resourceLocator });