Configuring Viewer Render Formats

General

The ActiveReportsJS Viewer provides flexibility in how reports are rendered within the browser. By selecting the appropriate render format, you can balance layout precision with web-standard compatibility. The JS Viewer supports three primary render formats that dictate how the report's visual elements are translated into browser-readable code. You can configure this setting during viewer initialization using the renderFormat property. The available formats are:

• auto (Default): The viewer automatically selects the best format based on the report type.

• html: Renders the report using standard HTML elements.

• svg: Renders the report as Scalable Vector Graphics for high-fidelity output.

To set the output format, specify the property in the configuration object:

import {createViewer} from './jsViewer.min.js';

const viewer = createViewer({
    element: '#viewerContainer',
    reportID: 'SalesReport.rdlx',
    renderFormat: 'auto'
});

HTML Format

The HTML render format utilizes standard web tags to display report content. While this is the most "native" format for web browsers, it comes with specific architectural characteristics and limitations.

• Rounding Issues: Because browsers handle sub-pixel rendering differently, you may encounter minor rounding discrepancies, particularly if an RDLX report is rendered in Galley Mode. These are inherent to browser engine calculations and cannot always be perfectly eliminated.

• Non-WYSIWYG: The HTML output may not always be a pixel-perfect match ("What You See Is What You Get") to the report designer's original layout due to CSS box-model constraints.

• Best For: This format is generally recommended for Page and RDLX reports where standard web behavior is preferred over strict layout precision.

SVG Format

SVG rendering treats the report page as a vector image, offering superior layout precision and near-perfect WYSIWYG quality.

Font Management & embedFonts

A common challenge with SVG rendering is font consistency. If a user does not have the specific report fonts installed on their local system, the browser will fall back to a default font, which may break the layout or change the report's appearance.

To resolve this, ActiveReportsJS includes an embedFonts option. When enabled, the viewer bundles the required font resources directly into the SVG output, ensuring they display correctly regardless of the user's system configuration.

import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
    renderMode: 'svg',
    embedFonts: true, 
    element: '#viewerContainer'
});

Recommendations

Choosing the right format depends on the specific requirements of your report project:

When to use SVG: Choose SVG when your report requires exact positioning (like pre-printed forms or Section reports) and you want to ensure the user sees the exact fonts intended by the designer.

When to use HTML: Choose HTML for standard dashboard-style reports or Page reports where slight variations in browser rendering are acceptable and performance is a priority for long documents.