レポートの読み込み

ビューワにレポートを読み込む方法はURLからレポートを読み込む方法とJSON定義からレポートを読み込む方法があります。
実行時にコード上でレポートレイアウトを変更する必要があるかによって、レポートを読み込む方法を選択します。

URLからレポートを読み込む

レポートをビューワに読み込む簡単な方法は、アプリケーション内にURL経由でレポートにアクセスできるようにし、APIを使用して読み込む方法です。
実行時にコード上でレポートレイアウトを変更する必要がない場合はこちらの方法が適しています。

JavaScript

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("/reports/report.rdlx-json"); // URLからレポートを読み込みます。

ビューワをWebアプリケーションに組み込む方法については、JavaScriptを参照してください。

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

ビューワをAngularアプリケーションに組み込む方法については、Angularを参照してください。

React

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

ビューワをReactアプリケーションに組み込む方法については、Reactを参照してください。

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\" }' />",
});

ビューワをVueアプリケーションに組み込む方法については、Vueを参照してください。

JSON定義からレポートを読み込む

URL経由でレポートにアクセスできない場合、または事前にコード上でレポートレイアウトを変更する必要がある場合にこちらの方法でレポートを読み込みます。
次の例は、/reports/Invoiceのリクエストがレポート定義をJSONオブジェクトとして返すことを前提にして、レポートの用紙方向を横に設定しています。

JavaScript

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

レポートパラメータの設定

レポートにレポートパラメータを設定することで、レポートの内容を変更することができます。レポートパラメータは実行時にビューワで値を入力することができます。また、コード上からレポートパラメータを設定することも可能です。
次の例ではコード上からレポートパラメータを設定しています。ビューワのopenメソッドの第2引数にNameおよびValueプロパティを持つオブジェクトの配列を渡すことで、レポートパラメータを設定できます。

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

関連トピック

• ビューワのインターフェイス
• JavaScript
• Angular
• React
• Vue
• レポートの読み込み[デモ]