# Preview a report with the ActiveReportsJS Designer

Learn how to preview a report that displays in the ActiveReportJS Designer instance.

## Content

ActiveReportsJS Report Designer does not have the out-of-the-box preview functionality, and the hosting application's code has to set it up. This page provides recipes for several common scenarios.

### Enabling the "Preview" button

The ActiveReportsJS Report Designer component contains the `Preview` button on the toolbar. It is not enabled and not visible by default, however. The code should configure the `onRender` action handler for the designer component to enable this button. Check [Action Handlers](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers) page for more information. The ActiveReportsJS Designer invokes the `onRender` handler when a user clicks the `Preview` button. The designer passes the currently displayed report's info consisting of the id, display name, and the report definition in the first argument. The `onRender` handler could load the report definition in ActiveReportJS viewer or export the report to one of the supported formats. For more information, check the following pages:

* [Loading reports from the JSON definition](/activereportsjs/docs/v6.1/#loading-a-report-from-the-json-definition)
* [Export reports without loading them in the viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export#export-reports-without-loading-them-in-the-viewer)

Here is the example of the `onRender` handler for a React application that displays the currently displayed report in the ActiveReportsJS Report Viewer.

```javascript
import React from "react";
import "./App.css";
import {
  Viewer as ReportViewer,
  Designer,
} from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs/styles/ar-js-designer.css";

function App() {
  const viewerRef = React.useRef();
  const [viewMode, setViewMode] = React.useState(false);
  const onRender = (report) => {
    setViewMode(true);
    viewerRef.current?.Viewer.open(report.definition);
    return Promise.resolve();
  };

  return (
    <div id="app-host">
      <div id="designer-host" hidden={viewMode}>
        <Designer onRender={onRender} />
      </div>
      <div id="viewer-host" hidden={!viewMode}>
        <ReportViewer ref={viewerRef} />
      </div>
    </div>
  );
}
export default App;
```

Visit the [Live Demo](/activereportsjs/demos/features/designer-report-preview) for the complete examples for React, Angular, Vue, and pure JavaScript applications.

### Preview reports in response to UI events

An application could use the [getReport method](https://developer.mescius.com/activereportsjs/api/classes/ReportDesigner.Designer#getreport) of the ActiveReportJS Designer instance to obtain the currently displayed report info. Use this approach to add a custom `Preview Report` UI that exports a report to one of the supported formats. Here is an example of such an implementation for an Angular application.

```javascript
import { Component, ViewChild } from '@angular/core';
import { DesignerComponent } from '@mescius/activereportsjs-angular';
import { Core, PdfExport } from '@mescius/activereportsjs';

@Component({
  selector: 'app-root',
  template:
    '<div id="designer-host"><button (click)="onPdfPreview()">Pdf Preview</button><gc-activereports-designer [report]="report"> </gc-activereports-designer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(DesignerComponent, { static: false })
  reportDesigner: DesignerComponent;

  report = { id: 'assets/report.rdlx-json', displayName: 'my report' };

  onPdfPreview = async () => {
    const reportInfo = await this.reportDesigner.getReport();
    const report = new Core.PageReport();
    await report.load(reportInfo?.definition);
    const doc = await report.run();
    const result = await PdfExport.exportDocument(doc);
    result.download('exportedreport.pdf');
  };
}
```

Visit the [Live Demo](/activereportsjs/demos/features/designer-report-preview) for the complete examples for React, Angular, Vue, and pure JavaScript applications.

### Related Links

* [Live Demo](/activereportsjs/demos/features/designer-report-preview)
* [Integration](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration)
* [Action Handlers](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers)