PDF Export

Since v1.4.0 a ReoGrid instance can render the active worksheet to a real, vector PDF — text, borders, fills, merges, and cell-anchored images — with no external library and no server round-trip. Output is generated in-browser from worksheet data.

Note: PDF Export is available in the Pro edition.

A font is REQUIRED. The PDF renderer embeds glyph outlines from a TrueType (glyf) font you provide via font. There is no built-in default — call one of the font helpers below (or supply your own bytes) or the export throws. This is what makes Japanese and other non-Latin text render correctly.

Quick start

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

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

// Load an embeddable font once (Noto Sans JP, cached across reloads)
const font = await loadDefaultJapaneseFont()

// Render + download in one call
grid.saveAsPdf({ font, filename: 'report.pdf' })

saveAsPdf() renders and triggers a browser download. Use exportPdf() when you want the raw bytes (e.g. to upload or preview):

const bytes: Uint8Array = grid.exportPdf({ font })
// e.g. wrap in a Blob for a preview URL
const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }))

The font is the important part

Provide the font as raw TrueType glyf bytes (ArrayBuffer | Uint8Array). Three ways to get them:

import { loadDefaultJapaneseFont, loadFont, DEFAULT_JAPANESE_FONT_URL } from '@reogrid/pro'

// 1. Bundled default — Noto Sans JP (~9.6 MB, fetched from a public CDN, cached)
const a = await loadDefaultJapaneseFont()

// 2. Your own hosted subset (recommended for production — much smaller)
const b = await loadFont('https://cdn.example.com/fonts/NotoSansJP-Subset.ttf')

// 3. Bytes you already have (e.g. from an <input type="file"> or fetch)
const c = new Uint8Array(await file.arrayBuffer())

Both helpers cache the downloaded bytes in memory and in Cache Storage, so the ~9.6 MB default is fetched at most once per browser. For production, host a subset of the glyphs you actually need and pass its URL to loadFont — DEFAULT_JAPANESE_FONT_URL is exported if you want to build a subset from the same source.

ExportPdfOptions

saveAsPdf additionally accepts filename?: string. When omitted it defaults to the loaded document’s base name (see getDocumentName() / setDocumentName()), or worksheet.pdf when no file has been loaded.

Multi-page output with usePageBreaks

By default exportPdf lays the used range onto pages using the pageSize / orientation / marginMm / scale options. Set usePageBreaks: true to instead paginate using the worksheet’s own paging model — the PDF then breaks pages in exactly the same places as the Page Layout page-break preview, including manual breaks, the printable range, and the fit scale:

// The paper, orientation, margins, scale, and page bands all come from
// worksheet.getPrintSettings() + the computed breaks.
grid.worksheet.setPrintSettings({ paperSize: 'A4', orientation: 'landscape' })
grid.worksheet.insertRowPageBreak(40)   // start a new page at row 40

const font = await loadDefaultJapaneseFont()
grid.saveAsPdf({ font, usePageBreaks: true, filename: 'ledger.pdf' })

When usePageBreaks is on, the option-driven pageSize / orientation / marginMm / scale / fitToWidth / range fields are ignored — configure them through Page Layout instead. If the sheet has nothing to paginate, it falls back to the option-driven fields.

React example: an Export PDF button

import { useRef } from 'react'
import { Reogrid } from '@reogrid/pro/react'
import { loadDefaultJapaneseFont } from '@reogrid/pro'
import type { ReogridInstance } from '@reogrid/pro/react'

function App() {
  const gridRef = useRef<ReogridInstance>(null)

  async function handleExport() {
    const grid = gridRef.current
    if (!grid) return
    const font = await loadDefaultJapaneseFont()
    grid.saveAsPdf({ font, usePageBreaks: true, filename: 'report.pdf' })
  }

  return (
    <>
      <button onClick={handleExport}>Export PDF</button>
      <Reogrid ref={gridRef} style={{ flex: 1 }} />
    </>
  )
}

Related

• Page Layout — page size, margins, and the page-break preview that usePageBreaks follows.
• Browser Printing — quick print via the browser’s native dialog.
• Images — the cell-anchored images that appear in exported PDFs.