Print to HTML (browser printing)

printWorksheet() converts a worksheet to a styled HTML table and opens the browser’s native print dialog — the quickest path for ad-hoc printing. Nothing to install, no font to load, and the user can also pick “Save as PDF” from the dialog.

Browser printing is available in the Pro edition.

Looking for the overview? Print compares this route with PDF export and page setup. Need an exact, self-contained document file? Use Print to PDF instead.

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

Multi-page output with usePageBreaks

By default the whole sheet becomes one long HTML table and the browser decides where it splits. Set usePageBreaks: true to paginate with the worksheet’s own paging model instead — paper size, orientation, margins, and scale come from worksheet.getPrintSettings(), and every page from worksheet.getPrintPageRanges() prints as exactly one sheet, manual and dragged breaks included:

const ws = grid.worksheet;

ws.setPrintSettings({ paperSize: 'A4', orientation: 'landscape' });
ws.insertRowPageBreak(40);        // force a new page at row 40

printWorksheet(ws, { usePageBreaks: true });

Pages then break in the same places as the on-screen Page Layout preview. When the sheet has nothing to paginate — an empty sheet with no explicit printable range — it falls back to the single-table flow.

How it works

printWorksheet() performs the following steps:

1. Converts worksheet data to an HTML table
2. Creates a hidden iframe
3. Inserts the HTML table and CSS
4. 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 }} />
    </>
  );
}

Usage example: Print button in Vue

The Vue component publishes the grid as instance on its template ref (gridRef.value?.instance) — printWorksheet takes the worksheet from there:

<script setup lang="ts">
import { ref } from 'vue';
import { Reogrid, type ReogridInstance } from '@reogrid/pro/vue';
import { printWorksheet } from '@reogrid/pro';

const gridRef = ref<{ instance: ReogridInstance | null } | null>(null);

function handlePrint() {
  const worksheet = gridRef.value?.instance?.worksheet;
  if (worksheet) printWorksheet(worksheet, { usePageBreaks: true });
}
</script>

<template>
  <button @click="handlePrint">Print</button>
  <Reogrid ref="gridRef" style="width: 100%; height: 400px" />
</template>

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.
• Cell-anchored images are not included in the HTML output — use Print to PDF when images must appear.
• Saving as PDF from the print dialog is the browser’s own conversion: it may add headers/footers and substitute fonts. For byte-exact output use PDF Export.

Related

• Print — overview of all printing routes and how to choose.
• Page Layout — page size, margins, scale, and the page-break preview that usePageBreaks follows.
• PDF Export — render a worksheet to a real, vector PDF.
• PDF & Page Layout demo — page-break preview and export, live.