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. Visit the Export Settings 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" /> <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/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="/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: 500px; } </style> </head> <body> <div class="container-fluid"> <div class="form-group mb-3 mt-3"> <div> <label>Select available Exports: </label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="checkboxPdf" value="pdf" checked onchange="setAvailableExports()" /> <label class="form-check-label" for="inlineCheckbox1">PDF</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="checkboxHtml" value="html" checked onchange="setAvailableExports()" /> <label class="form-check-label" for="inlineCheckbox2">HTML</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="checkboxXLSX" value="xlsx" checked onchange="setAvailableExports()" /> <label class="form-check-label" for="inlineCheckbox3">XLSX</label> </div> </div> </div> <div id="viewer-host"></div> <script> const exportsSettings = { pdf: { title: "ActiveReportsJS Sample", author: "GrapeCity", 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", }, xlsx: { creator: "GrapeCity", size: "Letter", orientation: "Landscape", sheetName: "Report", password: "pwd", filename: "ActiveReportsJS-Sample.xlsx", }, html: { title: "ActiveReportsJS Sample", filename: "ActiveReportsJS-Sample.html", autoPrint: true, multiPage: true, embedImages: "external", outputType: "html", }, }; var viewer = null; const checkboxesIds = ["checkboxPdf", "checkboxHtml", "checkboxXLSX"]; function setAvailableExports() { const availableExports = []; checkboxesIds.forEach(function (checkBoxId) { const checkBox = document.getElementById(checkBoxId); if (checkBox && checkBox.checked) { availableExports.push(checkBox.value); } }); viewer.availableExports = availableExports; } GC.ActiveReports.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); viewer = new ActiveReports.Viewer("#viewer-host", { ExportsSettings: exportsSettings, }); viewer.sidebarVisible = true; viewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); setAvailableExports(); </script> </body> </html>