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

Page header & footer

Since v1.5.0 PrintSettings.headerFooter prints text in the paper margins — page numbers, a date, the sheet or file name — using Excel’s own format codes, and round-trips through xlsx.

ws.setPrintSettings({
  headerFooter: {
    header: { center: '&"Meiryo"売上明細' },
    footer: { right: 'Page &P / &N', left: '&D' },
  },
})

Each band has left / center / right sections, and there are three bands: header, footer, plus optional evenHeader / evenFooter and firstHeader / firstFooter enabled by the flags below.

Format codes

Section text stores the codes verbatim, exactly as Excel does, and they are expanded per page at print time.

Styling codes (&B, &12, &"Meiryo,Bold", &KFF0000, &G) are recognised and dropped — one font weight is embedded in the PDF, so honoring them is not possible and echoing them as text would be worse. An unknown code is kept verbatim, so a typo is visible rather than silently vanishing.

Options

The band’s distance from the paper edge is margins.header / margins.footer (Excel’s 0.3 in default). A band taller than that space pushes the body margin out, so a tall header costs rows per page rather than printing over your cells — and the break computation, the PDF exporter and the paged print HTML all agree on the resulting geometry.

Note: the on-screen page-break preview does not draw the bands; only the body area it outlines shrinks. Print or export to PDF to see them.

Header and footer travel through xlsx <headerFooter> and ReoGrid JSON (sheet.print.headerFooter), so a template authored in Excel keeps its page numbering.

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 { preloadPdfFont } from '@reogrid/pro'

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

await preloadPdfFont('ja')
// usePageBreaks makes the PDF break in exactly the same places as the preview
grid.saveAsPdf({ locale: 'ja', 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.

Related

• PDF Export — render the paginated sheet to a real PDF with usePageBreaks.
• Print — overview of all printing routes and how to choose.
• Print to HTML — quick print via the browser’s native dialog.
• XLSX Import & Export — how the page setup travels with the file.