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 you must supply one. The easiest option covers CJK text out of the box:

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

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

// ...populate the grid...

// Bundled Noto Sans JP (~9.6 MB, fetched once, then served from Cache Storage).
const font = await loadDefaultJapaneseFont();

grid.saveAsPdf({ font, filename: 'report.pdf' });

For production, host a subset of the glyphs you actually need and load it with loadFont — much smaller than the full CJK font:

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

const font = await loadFont('https://cdn.example.com/fonts/NotoSansJP-Subset.ttf');
grid.saveAsPdf({ font, filename: 'report.pdf' });

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,
});
ws.insertRowPageBreak(40); // start a new page at row 40

const font = await loadDefaultJapaneseFont();
grid.saveAsPdf({ font, 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

const font = await loadDefaultJapaneseFont();
const bytes: Uint8Array = await grid.exportPdf({ font });

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 { loadDefaultJapaneseFont } from '@reogrid/pro';
import { useRef } from 'react';

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

  async function exportPdf() {
    const font = await loadDefaultJapaneseFont();
    ref.current?.saveAsPdf({ font, 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