Skip to content
ariana-report

The viewer

ReportViewer generates a report from a template and data and shows it with navigation, zoom, print and export.

Props

Section titled “Props”
Prop Description
template Template object or JSON text.
data JSON data.
document A ready layout document to show instead of generating one.
params Parameter values, available as params.<name>.
locale Locale for numbers and dates. Overrides the template’s locale.
functions Extra functions callable from expressions.
measurer Text measurer, see Fonts.
maxPages, maxSteps Safety limits (default 10 000 pages).
pdf, excel Export options.
toolbar Show the toolbar (default true).
exports { pdf, excel, print } booleans.
showIssues Open the issues panel initially.
viewMode continuous (default) or single.
zoom, zoomMode Zoom factor, and custom, fitWidth or fitPage.
uiLocale, labels User interface language and label overrides.
theme Colors, radius and font.
controller An external ViewerController.
allowImageSrc Decides which image sources the viewer may load (default: http(s), blob, raster data URIs, relative URLs).
save Replaces the browser download for exports.
injectStyles Add the default stylesheet (default true).
onError / @error Generation or export error.
onGenerated / @generated A new layout document is ready.

Pages

Section titled “Pages”

All pages are shown in one scrollable column. Only the pages near the visible area are rendered, so long reports stay fast, and the page number follows the scroll position. The toolbar’s page buttons and the keys PageUp, PageDown, Home and End scroll to a page. viewMode="single" shows one page at a time.

viewer-basic.tsx
import { ReportViewer } from '@ariana-reports/react';
import { productsData, productsTemplate } from './report-data';


export default function ViewerBasic() {
  return <ReportViewer template={productsTemplate} data={productsData} zoomMode="fitWidth" />;
}

Your own toolbar

Section titled “Your own toolbar”

Every viewer is driven by a ViewerController. Hide the toolbar and use the controller, with the useViewer hook (React) or composable (Vue):

viewer-controller.tsx
import { ReportViewer, useViewer } from '@ariana-reports/react';
import { productsData, productsTemplate } from './report-data';


// Hide the built-in toolbar and drive the viewer from your own UI through its controller.
export default function ViewerController() {
  const { controller, state } = useViewer();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: 8, background: '#fff', font: '13px system-ui' }}>
        <button onClick={() => controller.previousPage()}>Previous</button>
        <span>
          Page {state.pageIndex + 1} of {state.pageCount}
        </span>
        <button onClick={() => controller.nextPage()}>Next</button>
        <button onClick={() => controller.zoomIn()}>Zoom in</button>
        <button onClick={() => controller.zoomOut()}>Zoom out</button>
        <button onClick={() => controller.downloadPdf()} disabled={state.busy}>
          Download PDF
        </button>
      </div>
      <div style={{ flex: 1, minHeight: 0 }}>
        <ReportViewer controller={controller} template={productsTemplate} data={productsData} toolbar={false} zoomMode="fitWidth" />
      </div>
    </div>
  );
}

Useful members: load(template, data), goToPage(index), nextPage(), previousPage(), setZoom(1.25), setZoomMode('fitWidth'), downloadPdf(), downloadExcel(), print(), regenerate(), getState() and subscribe(listener). The state holds document, error, pageIndex, pageCount, zoom, zoomMode and busy.

Without a framework

Section titled “Without a framework”

The engine and the renderer have no framework dependency:

import { PageList, generateReport, renderDocument } from '@ariana-reports/core';


const doc = generateReport(template, data, { params: { title: 'Q1' } });


// All pages at once:
renderDocument(doc, document.getElementById('report')!);


// Or a continuous, lazily rendered view with page tracking:
const scroller = document.getElementById('scroller')!;
const host = document.getElementById('pages')!;
const list = new PageList(scroller, host, { onPageChange: (index) => console.log('page', index + 1) });
list.update({ document: doc, zoom: 1, pageIndex: 0 });

Issues (failed expressions, clipped bands) are in doc.issues.

Keyboard

Section titled “Keyboard”

With the page area focused: PageDown / PageUp move between pages, Home / End go to the first / last page.