[]
DEMO DOCS THEME EDITOR API
DOWNLOAD
(Showing Draft Content)

Export reports

Supported export methods

ActiveReportsJS includes functionality that allows to export a report to PDF, XLSX, and HTML documents. Report Viewer UI contains the configurable Export Sidebar that lets users choose the output format and set up the exported document properties. Also, ActiveReportsJS API exposes methods that you can use to export a report without loading it in the viewer.

Configure Report Viewer Export Sidebar in pure JavaScript applications

An application should include the code from ar-js-pdf.js, ar-js-xlsx.js, and ar-js-html.js files to enable the corresponding export formats to be available in the Export Sidebar. The easiest way to do that is adding references to CDN-hosted code, for example:

<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js"></script>

If it's required to configure available export formats at runtime, then availableExports property can be used to achieve that, for example, the following code initializes the instance of Report Viewer and allows PDF format only in the Export Sidebar:

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.availableExports = ["pdf"];

The second argument of ActiveReports.Viewer constructor accepts ViewerOptions object that may have ExportsSettings property that you can use to preset the default values of settings for each supported export format. Check Export Settings page for more information on using the ExportsSettings property. Check Pure JavaScript documentation for more information on how to use ActiveReportsJS viewer in pure JavaScript applications.

Configure Report Viewer Export Sidebar in Angular applications

You can check Angular Component documentation for the detailed instructions on how to enable ActiveReportsJS services for Angular applications. You can use the availableExports property of Angular Viewer Component to set available export formats at runtime and the exportsSettings property to preset the export settings. Check Export Settings page for more information on using the exportsSettings property.

Enable Report Viewer Export Sidebar in React applications

ActiveReportsJS Report Viewer component for React automatically enables Export Sidebar if the code imports any type from @grapecity/activereports package. You can use the availableExports property of React Viewer Component to set available export formats at runtime and the exportsSettings property to preset the export settings. Check Export Settings page for more information on using the exportsSettings property. Check React component documentation for more information.

Enable Report Viewer Export Sidebar in Vue applications

ActiveReportsJS Report Viewer component for Vue automatically enables Export Sidebar if the code imports any type from the @grapecity/activereports package. You can use the availableExports property of Vue Viewer Component to set available export formats at runtime and the exportsSettings property to preset the export settings. Check Export Settings page for more information on using the exportsSettings property. Check Vue component documentation for more information.

Export reports without loading them in the viewer

ActiveReportsJS API allows exporting reports to supported formats without loading a report in the viewer. PdfExport, HtmlExport, and XlsxExport types expose exportDocument method for that. Here is the example of code that loads, runs, exports, and downloads the report to a PDF document:

import { Core, PdfExport } from "@grapecity/activereports";

const pdfExportSettings: PdfExport.PdfSettings = {
  title: "Test document",
  author: "GrapeCity",
  keywords: "export, report",
  subject: "Report",
  pdfVersion: "1.4",
};

const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
const result = await PdfExport.exportDocument(doc, pdfExportSettings);
result.download("exportedreport.pdf");

You can find the list of supported settings for each export type at Export Settings page