@reportwright/svelte

Svelte actions that mount the ReportWright report viewer and drag-and-drop designer on any element.

Live demo: mrarun005.github.io/reportwright-demo (Embed it shows the wrapper code; the designer playground is the designer this package mounts).

Plain JavaScript, so no compiler step and any Svelte version.

Install

npm i @reportwright/svelte @reportwright/viewer @reportwright/fonts
cp -r node_modules/@reportwright/fonts/public public/pw     # serve the fonts as static files

Vite 7: set worker: { format: 'es' } in vite.config.js (see @reportwright/viewer's bundler setup).

Quick start (30 seconds)

<script>
  import { reportWrightViewer } from '@reportwright/svelte';
  import definition from './orders.pw.json';   // the report from @reportwright/engine's README examples
  const orders = { rows: [{ customer: 'Asha Rao', amount: 1200.5 }, { customer: 'Ben Ode', amount: 80 }] };
</script>
<div style="height: 720px" use:reportWrightViewer={{ definition, data: { orders }, fontsUrl: '/pw/fonts/' }}></div>

The action was verified against this version with Vite 7 in Chromium (called directly, as Svelte calls it).

Examples

Get the handle, re-run with parameters, export:

<script>
  let viewer;
  const excel = async () => open(URL.createObjectURL(await viewer.export('xlsx')));
</script>
<button on:click={() => viewer.setParameters({ minAmount: 100 })}>Over 100</button>
<button on:click={excel}>Excel</button>
<div use:reportWrightViewer={{ definition, data: { orders }, fontsUrl: '/pw/fonts/', onReady: (h) => (viewer = h), onError: console.error }}></div>

Edit a report and save it to your own API:

<div use:reportWrightDesigner={{ definition, fontsUrl: '/pw/fonts/', onSave: (def) => fetch('/api/reports/orders', { method: 'PUT', body: JSON.stringify(def) }) }}></div>

With a self-hosted ReportWright server:

<div use:reportWrightViewer={{ server: 'https://reports.example.com', report: 'invoice', params: { id } }}></div>
<div use:reportWrightDesigner={{ server, definition, onSave: save }}></div>

A runnable app is in the repository's examples/svelte.

Options

| | Meaning | |---|---| | everything of mountViewer / mountDesigner | full table in @reportwright/viewer | | onReady(handle) | the ViewerHandle / DesignerHandle | | onError(error) | the viewer's code did not load (the element shows the message) |

When the options change, the viewer remounts only if what it shows changed (compared by content, callbacks ignored); the designer only for another server, report, readOnly or definition content, so it keeps its edits. destroy unmounts.

Support

Any Svelte version (peer svelte >= 3). Browsers and limits are the viewer's: see @reportwright/viewer.

No server needed: pass definition, data (JSON by data source name) and fontsUrl (a copy of @reportwright/fonts/public/fonts). server (the self-hosted ReportWright server) is optional: see what works standalone.

Related packages

@reportwright/viewer (what this wraps), @reportwright/engine, @reportwright/fonts, and the react, vue and angular wrappers.

MIT.