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. Visit the Preview Reports page for more information. Scroll down the page to see the code.

<!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>