使用 ActiveReportsJS Viewer 加载报表

ActiveReportsJS Viewer 提供了多种方式来加载报表，可以通过指定报表路径或者指定报表的JSON 定义，并在运行时指定报表参数。

从 URL 加载报表

Viewer 提供了API 打开指定路径下的报表：

纯 JavaScript 应用

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("/reports/report.rdlx-json"); // Loading the report from the URL

Angular 应用

import { ViewerComponent } from "@grapecity/activereports-angular";
@Component({
  selector: "app-root",
  template:
    "<gc-activereports-viewer (init)='onViewerInit()'> </gc-activereports-viewer>",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open("/reports/report.rdlx-json");
  }
}

React 应用

import { Viewer } from "@grapecity/activereports-react";
function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: "/reports/report.rdlx-json" }} />
    </div>
  );
}

Vue 应用

import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template: "<arjs-viewer :report='{ Uri: \"/reports/report.rdlx-json\" }' />",
});

打开报表的 JSON 定义文件

如果您无法通过URL 访问到服务器的 JSON 文件或者需要其他的配置信息才能够访问，也可以通过加载报表文件后，读取到报表的JSON 字串后，再修改报表的 JSON 字串，

以下示例演示了，通过加载指定路径下的报表文件 /reports/Invoice，并修改纸张方向为横向：

Pure JavaScript applications

var viewer = new ActiveReports.Viewer("#viewer-host");
fetch("/reports/Invoice")
  .then((data) => data.json())
  .then((report) => {
    report.Page.PageOrientation = "Landscape";
    viewer.open(report);
  });

Angular 框架写法

import { ViewerComponent } from "@grapecity/activereports-angular";
@Component({
  selector: "app-root",
  template:
    "<gc-activereports-viewer (init)='onViewerInit()'> </gc-activereports-viewer>",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent) reportViewer: ViewerComponent;
  onViewerInit() {
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        this.report.open(report);
      });
  }
}

React 框架的写法

import { Viewer } from "@grapecity/activereports-react";

function App() {
  const viewerRef = React.useRef();

  React.useEffect(() => {
    async function loadReport() {
      await fetch("/reports/Invoice")
        .then((data) => data.json())
        .then((report) => {
          report.Page.PageOrientation = "Landscape";
          viewerRef.current.Viewer.open(report);
        });
    }
    loadReport();
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
}

Vue 框架的写法

import { Viewer as ReportViewer } from "@grapecity/activereports-vue";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template: "<arjs-viewer ref='reportViewer' />",
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        viewer.open(report);
      });
  },
});

通过代码设置报表参数值

ActiveReportsJS 提供了报表参数功能，用于接收外部输入的值，因此可以在加载报表的时候为报表参数传值，从而进行数据处理或者其他功能的动态修改。示例代码如下：关于 open API 可点击了解。

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("/reports/report.rdlx-json", {
  ReportParams: [{ Name: "param", Value: ["Param Value"] }],
});

使用 ActiveReportsJS Viewer 加载报表

从 URL 加载报表

打开报表的 JSON 定义文件

通过代码设置报表参数值

相关链接