디자이너 컴포넌트 - 보고서 출력 미리 보기

이 샘플은 Angular, React, Vue 및 순수 JavaScript 응용 프로그램 내에서 ActiveReportsJS Designer 컴포넌트의 보고서 출력을 미리 보는 방법을 보여 줍니다. 디자이너 도구 모음에서 "미리 보기" 버튼을 클릭하면 현재 보고서가 표시된 뷰어가 열립니다. "PDF 미리 보기" 버튼을 클릭하면 보고서를 PDF로 내보내고 브라우저 설정에 따라 보고서가 자동으로 열리거나 다운로드됩니다. "디자이너 열기" 버튼을 클릭하면 디자이너 컴포넌트가 표시됩니다. 자세한 내용은 보고서 미리 보기 페이지를 방문하십시오. 코드를 보려면 아래로 스크롤하십시오.

<!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" /> <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-designer.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="$DEMOROOT$/lib/purejs/license.js"></script> <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://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" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-designer.css" /> <style> #designer-host, #viewer-host { margin: 0 auto; width: 100%; height: 500px; } </style> </head> <body> <div id="designer-toolbar" class="container-fluid"> <div class="row mt-3 mb-3"> <button id="btnPdfPreview" type="button" class="btn btn-primary btn-sm col-sm-2 ml-1" onclick="onPdfPreview()" > PDF Preview </button> <button id="btnDesignerOpen" type="button" class="btn btn-primary btn-sm col-sm-2 ml-1" onclick="onOpenDesigner()" > Open Designer </button> </div> </div> <div id="designer-host"></div> <div id="viewer-host"></div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script> var designer = null; function onOpenDesigner() { $("#viewer-host, #btnDesignerOpen").hide(); $("#designer-host, #btnPdfPreview").show(); } async function onPdfPreview() { const reportInfo = await designer.getReport(); const report = new GC.ActiveReports.Core.PageReport(); await report.load(reportInfo?.definition); const doc = await report.run(); const result = await GC.ActiveReports.PdfExport.exportDocument(doc); result.download("exportedreport"); } GC.ActiveReports.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host"); designer.setActionHandlers({ onRender: (report) => { $("#viewer-host, #btnDesignerOpen").show(); $("#designer-host, #btnPdfPreview").hide(); viewer.open(report.definition); return Promise.resolve(); }, }); designer.setReport({ id: "reports/company-template.rdlx-json" }); var viewer = new ActiveReports.Viewer("#viewer-host"); $("#viewer-host, #btnDesignerOpen").hide(); </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>