Svelte Component

This page provides a detailed overview of ActiveReportsJS Report Viewer Wrapper for Svelte. You can check the corresponding Get Started tutorial for a concise guide for integrating this wrapper to a Svelte application.

ActiveReportsJS Svelte NPM package

We provide the library that contains the ActiveReportsJS Report Viewer Wrapper for Svelte via the @grapecity/activereports-svelte npm package, which depends on the main @grapecity/activereports package that contains the core functionality.

ActiveReportsJS Svelte Viewer component

ActiveReportsJS Svelte Viewer component can be imported into a Svelte component and included in the markdown, for example:

<script lang="ts">
    import {Viewer} from "@grapecity/activereports-svelte";
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }}></Viewer>
</div>

The viewer component accepts the following properties.

Property	Type	Default Value	Description
availableExports	Array of strings		sets the list of exports that should be available in the viewer UI. See Exports page for more information
mouseMode	'Pan' \| 'Selection'	'Pan'	sets the mouse mode of Viewer component.
renderMode	'Galley' \| 'Paginated'	'Paginated'	sets the render mode of Viewer component
viewMode	'Continuous' \| 'SinglePage'	'Continuous'	sets the view mode of Viewer component
zoom	'FitWidth' \| 'FitPage' \| number	100	sets the zoom mode of Viewer component
fullscreen	boolean	false	indicates whether the Viewer component should display the content in Full-Screen mode
toolbarVisible	boolean	true	indicates whether the toolbar of Viewer component is visible or not
sidebarVisible	boolean	true	indicates whether the sidebar of Viewer component is visible or not
panelsLayout	'sidebar' \| 'toolbar'	'toolbar'	indicates the location of Search and Export functions within the UI of Viewer component
parameterPanelLocation	'default' \| 'top' \| 'bottom'	'default'	indicates the location of the Parameters bar within the UI of Viewer component
toolbarLayout	Object		sets the list of available toolbar items. See Customization page for more information
language	string		sets the language of the Viewer's UI. See Localization page for more information
exportsSettings	object		sets the export settings. Visit the Export Settings page for more information.
report	Object		sets the report to load in the Viewer component. See Loading Report section for more information
reportLoaded	(args: ReportLoadEventArgs)=>void		sets the handler for the event that occurs when a report is loaded but before rendering started
documentLoaded	(args: DocumentLoadEventArgs=>void		sets the handler for the event that occurs when a report rendering is completed
errorHandler	()=> void		sets the handler for the event that occurs if report rendering causes an error
showParametersOnOpen	'auto'\|'always'	'auto'	the `auto` value indicates that the `Parameters Panel` should open automatically upon report loading, even if the report's parameters have default values.

You can bind these input properties to dynamic values to completely overwrite the viewer component's default UI, check Customization page for more information.

Furthermore, the parent component can access methods and properties of the Viewer class by binding a variable to the Viewer node and using the Viewer() method, for example:

<script lang="ts">
    import {Viewer} from "@grapecity/activereports-svelte";
    import { onMount } from 'svelte';
    let viewerInst:Viewer;
    onMount(() => {
        viewerInst.Viewer().toggleFullScreen();
    });        
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }} bind:this={viewerInst}></Viewer>
</div>

Svelte Component

ActiveReportsJS Svelte NPM package

ActiveReportsJS Svelte Viewer component

Related links