このトピックでは、さまざまなJavaScriptフレームワークでJSビューワにレポートを読み込むためのコードを提供します。
JavaScript
| Index.cshtml |
コードのコピー
|
|---|---|
var viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); viewer.openReport("DemoReport.rdlx"); |
|
| app.component.ts |
コードのコピー
|
|---|---|
import { Component, OnInit } from '@angular/core';
import { createViewer } from '@mescius/activereportsnet-viewer';
import '@mescius/ar-viewer/dist/jsViewer.min.css';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
title = "app";
ngOnInit() {
this.viewer = createViewer({
element: '#viewer-host'
});
this.viewer.openReport("DemoReport.rdlx");
}
}
|
|
| App.jsx |
コードのコピー
|
|---|---|
import { useEffect } from 'react';
import './App.css';
import { createViewer } from '@mescius/activereportsnet-viewer';
import "@mescius/ar-viewer/dist/jsViewer.min.css";
function App() {
useEffect(() => {
const viewer = createViewer({
element: '#viewer-host',
reportID: "DemoReport.rdlx"
});
return () => {
viewer.destroy();
};
}, []);
return (
<div id="viewer-host" className="viewer-host" />
);
}
export default App;
|
|
| App.vue |
コードのコピー
|
|---|---|
<script>
import { createViewer } from '@mescius/activereportsnet-viewer';
import "@mescius/ar-viewer/dist/jsViewer.min.css";
export default {
name: 'app',
mounted() {
let serverUrl = 'http://localhost:5151';
this.viewer = createViewer({
element: '#viewer-host',
reportService: {
url: serverUrl + '/api/reporting'
}
});
this.viewer.openReport("DemoReport.rdlx");
}
}
</script>
<style>
#viewer-host {
background-color: #e5e5e5;
height: 100vh;
float: right;
width: 100%;
}
</style>
|
|
ビューワに最新バージョンのレポートを読み込むには、［更新］ボタンを使用します。