以 JSON 格式加载

如果你打算在服务器端保留报表模板，并按需加载它们。ActiveReportsJS 使用 JSON 格式及 rdlx-json 扩展名为报表模板。因此报表文件可以以JSON 文件的形式来复用。可以像检索 JSON 文件那样访问报表文件。 viewer.open 方法支持 JSON 格式。以下示例演示了在 Angular，React及Vue TypeScript 组件以 JSON 格式的文件读取报表：示例假定报表文件是保存到根路径下的 /reports/Invoice 文件夹下，开发者希望在加载报表之前修改，修改完成后再继续加载报表文件：

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);
      });
  }
}

更多信息参考 Angular Viewer 组件

React component

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>
  );
}

更多信息参考 React Viewer 组件

Vue component

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);
      });
  },
});

更多信息参考 Vue Viewer 组件。

JavaScript component

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

更多信息参考纯JavaScript 集成。

具体信息参考报表加载示例。