How to Set Page Margins in the JavaScript Report Viewer

Bold Reports allows you to programmatically set page margins in the JavaScript Report Viewer using the pageSettings.margins property for precise RDL report layouts. This helps control the whitespace around report content and ensures consistent layout presentation across browsers and printed documents.

Step-by-Step Instructions

Step 1: Initialize the Report Viewer

Open your JavaScript initialization file where the Report Viewer is configured. Locate the boldReportViewer property object to add the pageSettings property to the configuration.

Step 2: Define Page Settings and Margins

Define the margins object inside pageSettings. Assign numeric values to top, bottom, left, and right.

The margin values are interpreted in inches by the Report Viewer.

Full Code Example

Use the following code snippet to initialize the viewer with a specific report service, report path, and custom margins.

$(function () {
    $("#viewer").boldReportViewer({
        // The service URL to process the report
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        // The path to the RDL report file
        reportPath: '~/Resources/docs/sales-order-detail.rdl',
        // Enables print-optimized rendering
        printMode: true,
        // Customizes the page layout margins in inches
        pageSettings: {
            margins: {
                top: 0.5,
                right: 0.25,
                bottom: 0.5,
                left: 0.25
            }
        }
    });
});

Property Definitions

The following table describes the properties used to configure report margins:

Property	Description
`pageSettings`	Defines page-level configurations such as orientation and margins
`margins`	An object within `pageSettings` that defines the whitespace around the report content.
`top`, `bottom`, `left`, `right`	Numeric values representing margin size (in inches)
`printMode`	A Boolean value. When set to `true`, renders the report using a print-optimized layout

Preview

Before Setting Page Margins

By default, the report uses the margins defined in the RDL file or the viewer’s default settings.

After Setting Page Margins

After applying the pageSettings.margins property, the report layout adjusts according to the specified margin values (for example, 0.5 inches and 0.25 inches).

Download the sample application here.