Browser Printing

ReoGrid Web can print a worksheet using the browser’s native print dialog — the quickest path for ad-hoc printing, converting the sheet to an HTML table and handing it to the browser.

Browser printing is available in the Pro edition.

Need paginated or PDF output? For precise page control — page size, margins, manual page breaks, a page-break preview, and vector PDF files — use the new v1.4.0 features instead:

Page Layout — paper size, margins, scale, and the page-break preview.

PDF Export — render the sheet to a real, embeddable-font PDF (with usePageBreaks).

This page covers the lightweight browser-dialog path.

Basic usage

import { printWorksheet } from '@reogrid/pro';

printWorksheet(grid.worksheet);

Print options

printWorksheet(grid.worksheet, {
  pageSize: 'A4',
  orientation: 'landscape',
  margin: '10mm',
  showHeaders: true,
  showGridLines: true,
  title: 'Sales Report',
  fitToPage: true,
});

PrintOptions

Option	Type	Default	Description
`pageSize`	`string`	`'A4'`	Paper size
`orientation`	`'portrait' \| 'landscape'`	`'portrait'`	Print orientation
`margin`	`string`	`'15mm'`	Page margins (CSS value)
`showHeaders`	`boolean`	`false`	Whether to print row/column headers
`showGridLines`	`boolean`	`true`	Whether to print grid lines
`title`	`string`	—	Title displayed at the top of the page
`fitToPage`	`boolean`	`false`	Scale down to fit a single page

How it works

printWorksheet() performs the following steps:

Converts worksheet data to an HTML table
Creates a hidden iframe
Inserts the HTML table and CSS
Calls the iframe’s print()

Cell styles (font, color, borders, cell merges, etc.) are converted to HTML/CSS.

Usage example: Print button in React

import { useRef } from 'react';
import { Reogrid } from '@reogrid/pro/react';
import { printWorksheet } from '@reogrid/pro';
import type { ReogridInstance } from '@reogrid/pro/react';

function App() {
  const gridRef = useRef<ReogridInstance>(null);

  function handlePrint() {
    if (gridRef.current) {
      printWorksheet(gridRef.current.worksheet, {
        title: 'Monthly Report',
        orientation: 'landscape',
      });
    }
  }

  return (
    <>
      <button onClick={handlePrint}>Print</button>
      <Reogrid ref={gridRef} style={{ flex: 1 }} />
    </>
  );
}

Notes

The browser’s print dialog will be displayed.
Custom cell types (progress bars, sparklines, etc.) are only reflected in print output if the renderHTML() method is implemented.

Page Layout — page size, margins, scale, and the page-break preview.
PDF Export — render a worksheet to a real, vector PDF.