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.
The demo is being dynamically compiled to support real-time code editing...
For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.jsx
index.html
Copy to CodeMine
loading...import React from "react";
import ReactDOM from "react-dom";
import { Viewer } from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/tabulardataexport";
import "@mescius/activereportsjs-i18n";
import { FontStore } from "@mescius/activereportsjs/core";
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",
},
html: {
title: "ActiveReportsJS Sample",
filename: "ActiveReportsJS-Sample.html",
autoPrint: true,
multiPage: true,
embedImages: "external",
outputType: "html",
},
};
// remove items from this array to hide unnecessary Exports Types
const availableExports = ["pdf", "html", "tabular-data"];
function App() {
return (
<div id="viewer-host">
<Viewer
theme="ActiveReports"
report={{
Uri: "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json",
}}
exportsSettings={exportsSettings}
availableExports={availableExports}
/>
</div>
);
}
FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");
ReactDOM.render(<App />, document.getElementById("root"));
Feedback
Submit and view feedback for