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.
app.jsx
index.html
Copy to CodeMine
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