ActiveReportsJS 뷰어로 보고서 로드
ActiveReportsJS 뷰어로 보고서를 로드하는 방법에는 여러 가지가 있습니다. 선택하는 정확한 경로에 따라 보고서가 저장되는 위치와 런타임에 보고서 정의를 수정해야 할지 또는 로드 전에 매개 변수의 값을 설정해야 할지 여부가 달라집니다.
URL에서 보고서 로드
뷰어로 보고서를 로드하는 가장 쉬운 방법은 응용 프로그램 내에서 URL을 통해 액세스할 수 있도록 지정한 다음 아래에 표시된 대로 뷰어 API에서 해당 URL을 사용하는 것입니다.
순수 JavaScript 응용 프로그램
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("/reports/report.rdlx-json"); // Loading the report from the URL
순수 JavaScript 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 순수 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 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Angular 뷰어 컴포넌트 페이지를 확인하십시오.
React 응용 프로그램
import { Viewer } from "@grapecity/activereports-react";
function App() {
return (
<div id="viewer-host">
<Viewer report={{ Uri: "/reports/report.rdlx-json" }} />
</div>
);
}
React 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 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 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Vue 뷰어 컴포넌트 페이지를 확인하십시오.
JSON 정의에서 보고서 로드
URL을 통해 보고서에 액세스하도록 지정할 수 없거나 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);
});
순수 JavaScript 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 순수 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() {
fetch("/reports/Invoice")
.then((data) => data.json())
.then((report) => {
report.Page.PageOrientation = "Landscape";
this.report.open(report);
});
}
}
Angular 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Angular 뷰어 컴포넌트 페이지를 확인하십시오.
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>
);
}
React 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 React 뷰어 컴포넌트 페이지를 확인하십시오.
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);
});
},
});
Vue 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Vue 뷰어 컴포넌트 페이지를 확인하십시오.
매개 변수 값 제공
매개 변수 사용은 런타임에 보고서를 변경하는 데 권장되는 방법입니다. 최종 사용자가 뷰어 세로 막대에서 매개 변수의 값을 지정할 수 있습니다. 경우에 따라 숨겨진 매개 변수를 사용해야 합니다.
위의 모든 예에서는 뷰어 컴포넌트의 open 메서드가 사용 중입니다. 동일한 메서드가 매개 변수의 값을 제공하는 데 사용할 수 있는 두 번째 인수를 수락합니다. 매개 변수의 값 유형은 이름 및 값 속성이 있는 개체의 배열입니다. 다음은 VanillaJS 응용 프로그램의 수정된 예입니다.
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("/reports/report.rdlx-json", {
ReportParams: [{ Name: "param", Value: ["Param Value"] }],
});