뷰어 컴포넌트 - 보고서 로드

이 샘플에서는 Angular, React, Vue 및 순수 JavaScript 응용 프로그램을 사용하여 ActiveReportsJS Viewer 컴포넌트로 보고서를 로드하는 방법을 보여 줍니다. "원본 보고서 로드" 버튼은 보고서를 URL에서 로드하고, "수정된 보고서 로드" 버튼은 먼저 보고서를 가져오고 배경 이미지를 추가한 다음 결과 보고서 정의를 로드합니다. 자세한 내용은 보고서 로드 페이지를 방문하십시오. 코드를 보려면 아래로 스크롤하십시오.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <script src="/activereportsjs/demos/arjs/dist/ie-polyfills.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-xlsx.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 500px; } </style> </head> <body> <div id="viewer-toolbar" class="container-fluid"> <div class="row mt-3 mb-3"> <button type="button" class="btn btn-primary col-sm-2 ml-1" onclick="onLoadFromFile()" > Load Original Report </button> <button type="button" class="btn btn-secondary col-sm-2 ml-1" onclick="onLoadFromDefinition()" > Load Modified Report </button> </div> </div> <div id="viewer-host"></div> <script> var viewer; function onLoadFromDefinition() { fetch("/activereportsjs/demos/resource/reports/Frontstore.rdlx-json") .then((data) => data.json()) .then((report) => { report.Body.Style.BackgroundImage = { Value: "background.svg" }; viewer.open(report); }); } function onLoadFromFile() { viewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); } GC.ActiveReports.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); viewer = new ActiveReports.Viewer("#viewer-host"); </script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous" ></script> </body> </html>