Export a PDF

Generate a print-perfect PDF from the current worksheet, entirely in the browser — no server round-trip and no external PDF library. Introduced in v1.4.

Pro only. saveAsPdf / exportPdf are a no-op in the Lite edition. A valid licenseKey is required.

The font is the important part

The PDF engine embeds a TrueType (glyf) font, so one is required. Since v1.5 the easiest way is to name a locale — 'ja', 'zh-CN', 'zh-TW' and 'ko' are registered out of the box:

import { createReogrid, preloadPdfFont } from '@reogrid/pro';

const grid = createReogrid('#grid', { licenseKey: 'YOUR-LICENSE-KEY' });

// ...populate the grid...

// Pay the font download once, at an async point you control (cached afterwards):
await preloadPdfFont('ja');

// Export is synchronous — call it from any click handler thereafter.
grid.saveAsPdf({ locale: 'ja', filename: 'report.pdf' });

For production, install the matching subset package and register it — the bytes come from npm, so there is no runtime network at all:

// npm install @reogrid/font-jp   (also: font-sc → 'zh-CN', font-tc → 'zh-TW', font-kr → 'ko')
import { registerPdfFont, preloadPdfFont } from '@reogrid/pro';
import { loadNotoSansJP } from '@reogrid/font-jp';

registerPdfFont('ja', loadNotoSansJP);
await preloadPdfFont('ja');
grid.saveAsPdf({ locale: 'ja', filename: 'report.pdf' });

Or pass your own bytes in font for a font ReoGrid does not know about — see PDF Export.

When you omit filename, it defaults to the loaded document’s base name (purchase-order.xlsx → purchase-order.pdf).

Paginate exactly like the on-screen preview

Set up an Excel-style page layout first, then pass usePageBreaks: true so the PDF breaks pages in the same places as the page-break preview — manual breaks, printable range, and fit-to-page scale included:

const ws = grid.worksheet;

ws.setPrintSettings({
  paperSize: 'A4',
  orientation: 'landscape',
  margins: { top: 12, right: 12, bottom: 12, left: 12 },
  scale: 1,
  headerFooter: { footer: { right: 'Page &P / &N' } },  // v1.5 — Excel format codes
});
ws.insertRowPageBreak(40); // start a new page at row 40

grid.saveAsPdf({ locale: 'ja', usePageBreaks: true, filename: 'ledger.pdf' });

With usePageBreaks: true, the option-driven pageSize / orientation / marginMm / scale / fitToWidth / range are ignored — configure them through setPrintSettings() instead.

Get the raw bytes instead of a download

await preloadPdfFont('ja');
const bytes: Uint8Array = grid.exportPdf({ locale: 'ja' });

await fetch('/api/store', {
  method: 'POST',
  headers: { 'Content-Type': 'application/pdf' },
  body: bytes,
});

From a button (React)

import { Reogrid, type ReogridInstance } from '@reogrid/pro/react';
import { preloadPdfFont } from '@reogrid/pro';
import { useEffect, useRef } from 'react';

export default function App() {
  const ref = useRef<ReogridInstance>(null);

  useEffect(() => { preloadPdfFont('ja'); }, []);  // warm the font cache up front

  function exportPdf() {
    ref.current?.saveAsPdf({ locale: 'ja', usePageBreaks: true, filename: 'report.pdf' });
  }

  return (
    <>
      <button onClick={exportPdf}>Export PDF</button>
      <Reogrid ref={ref} options={{ licenseKey: 'YOUR-LICENSE-KEY' }} style={{ width: '100%', height: 500 }} />
    </>
  );
}

Common options

See also

• PDF Export
• Page Layout
• Fill a Report Template