# Export reports

Learn how to export reports with ActiveReportsJS

## Content

## Supported Export Methods
ActiveReportsJS provides built-in functionality for exporting reports to **PDF**, **Excel**, **Tabular Data**, and **HTML** formats. The Report Viewer UI includes a configurable **Export Sidebar**, which allows report readers to select an output format and adjust export options. Additionally, the [ActiveReportsJS API](/activereportsjs/docs/v6.1/DeveloperGuide/api) provides programmatic methods for exporting reports **without loading them in the viewer**.

## Configuring the Export Sidebar in Pure JavaScript Applications
To enable export functionality, include the following script files in your application:

```html
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-xlsxAdv.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-html.js"></script>
```

Each script enables the corresponding export format in the Export Sidebar.
To configure which export formats are available at runtime, use the [availableExports ](/activereportsjs/api/v6.1/classes/ReportViewer.Viewer#availableexports) property. For example, the following code initializes a Report Viewer instance and enables only the PDF export option:

```js
var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
viewer.availableExports = ["pdf"];
```

Supported values for the `availableExports` property:
| Export Type     | Property Value   |
|-----------------|------------------|
| PDF             | `"pdf"`          |
| Excel (XLSX)    | `"xlsxAdv"`      |
| Tabular Data    | `"tabular-data"` |
| HTML            | `"html"`         |

You can also preset default export options using the `ExportsSettings` property of the [ViewerOptions object](/activereportsjs/api/v6.1/interfaces/ReportViewer.ViewerOptions). See the [Export Settings](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) page for detailed instructions. 
For more information about using ActiveReportsJS in pure JavaScript applications, refer to the [Pure JavaScript documentation](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/VanillaJS).

## Configuring the Export Sidebar in Angular Applications
For Angular projects, refer to the  [Angular Component documentation](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component#activereportjs-export-services) for details on enabling export services.
At runtime, you can:
* Use the `availableExports` property to define the list of enabled export formats.
* Use the `exportsSettings` property to set default export options.

See the [Export Settings](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) page for details.

## Configuring the Export Sidebar in React, Svelte and Vue Applications

In React, Svelte and Vue applications, the ActiveReportsJS Report Viewer component automatically enables the Export Sidebar when any type from the `@grapecity/activereports` package is imported.
At runtime, you can configure export behavior using the following component properties:

- `availableExports` — defines which export formats are available in the Export Sidebar.
- `exportsSettings` — presets default export settings for each format.

Refer to the [Export Settings](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) page for details on configuring export options.
For framework-specific setup instructions, see:
- [React component documentation](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component)
- [Vue component documentation](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component)
- [Svelte component documentation](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/svelte-component)