Page Layout

Since v1.4.0 every worksheet carries a paging model — paper size, orientation, margins, and scale — plus an on-screen page-break preview with draggable, insertable breaks. It drives both PDF Export (usePageBreaks: true) and round-trips through xlsx so a sheet paginates the same way in ReoGrid and Excel.

Note: Page Layout is available in the Pro edition.

Print settings

Read and update the paging model on the worksheet:

import { createReogrid } from '@reogrid/pro'

const grid = createReogrid({ workspace: '#app' })
const ws = grid.worksheet

// Merge a partial update — untouched fields keep their value
ws.setPrintSettings({
  paperSize: 'A4',
  orientation: 'landscape',
  margins: { top: 15, right: 12, bottom: 15, left: 12 }, // mm
  scale: 1,                                              // 1 = 100%
})

const settings = ws.getPrintSettings()
console.log(settings.paperSize, settings.orientation)

PrintSettings

Field	Type	Default	Description
`paperSize`	`'A3'\|'A4'\|'A5'\|'B4'\|'B5'\|'Letter'\|'Legal'\|'Tabloid'\|'Executive'` or `{ widthMm, heightMm }`	`'A4'`	Paper size name or custom size in mm.
`orientation`	`'portrait' \| 'landscape'`	`'portrait'`	Page orientation.
`margins`	`{ top, right, bottom, left }`	Excel defaults (17.78 mm sides, 19.05 mm top/bottom)	Margins in mm.
`scale`	`number`	`1`	Content scale factor; clamped to `[0.1, 4]`.
`pageOrder`	`'downThenOver' \| 'overThenDown'`	`'downThenOver'`	Order pages are walked for `getPrintPageRanges`.

Page-break preview

Toggle the Excel-style overlay that shades page boundaries directly on the grid:

ws.setShowPageBreaks(true)   // show the blue page-break lines
ws.setShowPageBreaks(false)  // hide them

With the preview on, the sheet is divided into page bands computed from the current print settings. Drag a break line to pin it as a manual break, or insert breaks programmatically.

Manual page breaks

ws.insertRowPageBreak(40)     // force a new page starting at row 40
ws.insertColumnPageBreak(8)   // force a new page starting at column 8

Manual breaks are honored by both the preview and PDF export. To inspect the resulting page bands:

const pages = ws.getPrintPageRanges() // PrintRange[] in page order
pages.forEach((p, i) => {
  console.log(`Page ${i + 1}: rows ${p.topRow}–${p.bottomRow}, cols ${p.leftColumn}–${p.rightColumn}`)
})

Each PrintRange is { topRow, leftColumn, bottomRow, rightColumn } (0-based, inclusive). Pass a PageOrder to getPrintPageRanges(order?) to override pageOrder for one call.

From layout to paginated output

Because PDF export can reuse this exact model, page layout is the single source of truth for pagination:

import { loadDefaultJapaneseFont } from '@reogrid/pro'

ws.setPrintSettings({ paperSize: 'A4', orientation: 'portrait', scale: 0.9 })
ws.insertRowPageBreak(50)

const font = await loadDefaultJapaneseFont()
// usePageBreaks makes the PDF break in exactly the same places as the preview
grid.saveAsPdf({ font, usePageBreaks: true, filename: 'ledger.pdf' })

xlsx round-trip

Print settings and manual page breaks are written to and read back from .xlsx (<pageSetup>, <pageMargins>, <rowBreaks> / <colBreaks>), so a file exported from ReoGrid opens in Excel with the same page setup — and vice versa. They also round-trip through ReoGrid JSON.

PDF Export — render the paginated sheet to a real PDF with usePageBreaks.
Browser Printing — quick print via the browser’s native dialog.
XLSX Import & Export — how the page setup travels with the file.