Designer Component - Preview Reports Output

These samples show how to preview reports output in the ActiveReportsJS Designer component within Angular, React, Vue, and pure JavaScript applications. Click the "Preview" button on the designer toolbar opens the viewer that displays the current report. Click on the "PDF Preview" button exports a report to PDF and automatically opens or downloads it, depending on the browser settings. Click on the "Open Designer" button displays the designer component. For more details, please visit the Preview Reports page for more information. To view the code, scroll down the page.

<!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/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="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.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://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-viewer.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-designer.css" /> <style> #designer-host, #viewer-host { margin: 0 auto; width: 100%; height: 500px; } .hide { display: none; } </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-outline-primary btn-sm col-sm-2 ml-1" onclick="onPdfPreview()" > PDF Preview </button> <button id="btnDesignerOpen" type="button" class="btn btn-outline-primary btn-sm col-sm-2 ml-1 hide" onclick="onOpenDesigner()" > Open Designer </button> </div> </div> <div id="designer-host"></div> <div id="viewer-host" class="hide"></div> <script> function setVisibility(selector, isVisible){ document.querySelectorAll(selector).forEach(function(element){ isVisible ? element.classList.remove("hide") : element.classList.add("hide"); }); } var designer = null; function onOpenDesigner() { setVisibility("#viewer-host, #btnDesignerOpen", false); setVisibility("#designer-host, #btnPdfPreview", true); } 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) => { setVisibility("#viewer-host, #btnDesignerOpen", true); setVisibility("#designer-host, #btnPdfPreview", false); viewer.open(report.definition); return Promise.resolve(); }, }); designer.setReport({ id: "reports/company-template.rdlx-json" }); var viewer = new ActiveReports.Viewer("#viewer-host"); </script> </body> </html>