Viewer Component - Export settings

These samples show how to set up the ActiveReportsJS Viewer component's export UI. The code uses the availableExports property of the Viewer component to specify available export types and the ExportsSettings option to preset the output document's settings. Try to export the report to one of the supported formats and observe the applied settings in the output document. For more details, please visit the Export Settings page. 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 Report Viewer Export Settings 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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <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-tabular-data.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <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: 600px; } </style> </head> <body> <div id="viewer-host"></div> <script> const exportsSettings = { pdf: { title: "ActiveReportsJS Sample", author: "MESCIUS", subject: "Web Reporting", keywords: "reporting, sample", userPassword: "pwd", ownerPassword: "ownerPwd", printing: "none", copying: false, modifying: false, annotating: false, contentAccessibility: false, documentAssembly: false, pdfVersion: "1.7", autoPrint: true, filename: "ActiveReportsJS-Sample.pdf", }, html: { title: "ActiveReportsJS Sample", filename: "ActiveReportsJS-Sample.html", autoPrint: true, multiPage: true, embedImages: "external", outputType: "html", }, }; MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer( "#viewer-host", { ExportsSettings: exportsSettings, } ); viewer.theme="ActiveReports"; // remove items from this array to hide unnecessary Exports Types viewer.availableExports = ["pdf", "html", "tabular-data"]; viewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); </script> </body> </html>