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.

Images

Since v1.6.0 cell-anchored images — a logo, a 印影 stamp — are drawn in the printed output. They are positioned against each page band and scale with it, so the shrink factor, page breaks and print area come out the same as in PDF export.

toPagedHtmlDocument() takes a showImages flag; it defaults to whatever the sheet has switched on.

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

const html = toPagedHtmlDocument(ws, { showImages: false });

Before v1.6.0 a logo appeared on screen, in PDF and in xlsx, but was missing from the HTML print route.

Print fidelity

v1.6.0 brought the HTML output in line with what the canvas draws. Three differences used to lose text on paper that was visible on screen:

• Text now spills into empty neighbours. The canvas, like Excel, lets a value wider than its column overflow into empty adjacent cells, but a <td> always clips — so 「有効期限」 printed as 「有…」. The overflow width is computed with the same function the screen uses.
• No more ellipsis. A 2px overhang used to turn the last character into …. Neither the canvas nor Excel does that on paper, so it simply clips.
• Rows are exactly their specified height. <tr height> is a minimum in HTML, so a wrapping detail row stretched and pushed the rows below it down until the ones at the foot of the page fell off the paper. Wrapping cells are now pinned to the row height and clipped, with line-height matched to the canvas.

Content taller than its row is also clipped to the row now, instead of spilling over the rows above and below.

Only printing changed — clipboard copy takes a different route and is unaffected.

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.
• 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.
• A number format’s bracket colour ([Red]) is not applied on this route — the HTML output uses the cell style’s text colour. PDF Export does honour it.

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.