レポートの読み込み

このトピックでは、さまざまなJavaScriptフレームワークでJSビューワにレポートを読み込むためのコードを提供します。

JavaScript

Index.cshtml	コードのコピー
var viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); viewer.openReport("DemoReport.rdlx");

Angular

app.component.ts	コードのコピー
export class AppComponent implements AfterViewInit { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); this.viewer.openReport("DemoReport.rdlx"); } }

app.component.ts

コードのコピー

export class AppComponent implements AfterViewInit {
      title = "app";
      viewer: any;
       ngAfterViewInit() {
           this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
              element: '#viewer-host'
           });
           this.viewer.openReport("DemoReport.rdlx");
       }
}

React

App.js	コードのコピー
export default class app extends Component { GrapeCity: any; constructor(props) { super(props); } componentDidMount() { this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host', reportID: DemoReport.rdlx' }); } componentDidUpdate() { this.viewer.openReport("DemoReport.rdlx"); } }

App.js

コードのコピー

export default class app extends Component {
    GrapeCity: any;
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewer-host',
            reportID: DemoReport.rdlx'
        });
    }
    componentDidUpdate() {
        this.viewer.openReport("DemoReport.rdlx");
    }
}

Vue

App.vue	コードのコピー
export default { name: 'app', mounted() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); this.viewer.openReport("DemoReport.rdlx"); } }

ビューワに最新バージョンのレポートを読み込むには、［更新］ボタンを使用します。