Printing

ReoGrid Web can print a worksheet using the browser’s native print dialog.

Printing is available in the Pro edition.

Basic usage

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

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 page width

How it works

printWorksheet() performs the following steps:

Converts worksheet data to an HTML table
Opens a new window
Inserts the HTML table and CSS
Calls window.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, printWorksheet } from '@reogrid/lite/react';
import type { ReogridInstance } from '@reogrid/lite/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.