PDFエクスポート

v1.4.0 から、ReoGrid インスタンスはアクティブなワークシートを本物のベクター PDF（テキスト・罫線・塗り・セル結合・セルアンカー画像）に出力できます。外部ライブラリもサーバー往復も不要で、ワークシートのデータからブラウザ内で生成します。

Note: PDFエクスポートは Pro 版で利用可能です。

フォントは必須です。 PDF レンダラーは、font で渡した TrueType（glyf）フォントからグリフ輪郭を埋め込みます。組み込みの既定フォントは存在しないため、下記のフォントヘルパーを呼ぶ（または自前のバイト列を渡す）必要があり、渡さない場合はエクスポートが例外を投げます。これにより日本語などの非ラテン文字が正しく描画されます。

クイックスタート

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

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

// 埋め込み可能なフォントを一度読み込む（Noto Sans JP、リロード間もキャッシュ）
const font = await loadDefaultJapaneseFont()

// レンダリングとダウンロードを 1 回で
grid.saveAsPdf({ font, filename: 'report.pdf' })

saveAsPdf() はレンダリングしてブラウザのダウンロードを起動します。生のバイト列が欲しい場合（アップロードやプレビューなど）は exportPdf() を使います。

const bytes: Uint8Array = grid.exportPdf({ font })
// 例：プレビュー URL 用に Blob へラップ
const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }))

重要なのはフォント

フォントは生の TrueType glyf バイト列（ArrayBuffer | Uint8Array）で渡します。入手方法は 3 通りです。

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

// 1. 同梱の既定フォント — Noto Sans JP（約 9.6 MB、公開 CDN から取得・キャッシュ）
const a = await loadDefaultJapaneseFont()

// 2. 自前でホストするサブセット（本番推奨 — はるかに軽量）
const b = await loadFont('https://cdn.example.com/fonts/NotoSansJP-Subset.ttf')

// 3. すでに手元にあるバイト列（<input type="file"> や fetch など）
const c = new Uint8Array(await file.arrayBuffer())

どちらのヘルパーも、ダウンロードしたバイト列をメモリおよび Cache Storage にキャッシュするため、約 9.6 MB の既定フォントの取得はブラウザごとに最大 1 回です。本番環境では実際に必要なグリフだけをサブセット化してホストし、その URL を loadFont に渡してください（DEFAULT_JAPANESE_FONT_URL は同じソースからサブセットを作りたい場合に公開されています）。

ExportPdfOptions

saveAsPdf はさらに filename?: string を受け取ります。省略時は読み込み済みドキュメントのベース名（getDocumentName() / setDocumentName() 参照）、ファイル未読込のときは worksheet.pdf になります。

usePageBreaks による複数ページ出力

既定では exportPdf は使用範囲を pageSize / orientation / marginMm / scale オプションでページに割り付けます。usePageBreaks: true を指定すると、代わりにワークシート独自のページングモデルで改ページします — PDF は ページレイアウト の改ページプレビューとまったく同じ位置（手動改ページ・印刷範囲・フィットスケールを含む）で改ページされます。

// 用紙・向き・余白・スケール・ページ帯はすべて
// worksheet.getPrintSettings() と計算済みの改ページから取得されます。
grid.worksheet.setPrintSettings({ paperSize: 'A4', orientation: 'landscape' })
grid.worksheet.insertRowPageBreak(40)   // 40 行目から新しいページ

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

usePageBreaks が有効なとき、オプション側の pageSize / orientation / marginMm / scale / fitToWidth / range は無視されます — 代わりに ページレイアウト で設定してください。改ページ対象が何もないシートの場合はオプション側にフォールバックします。

React の例：PDF 出力ボタン

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}>PDF 出力</button>
      <Reogrid ref={gridRef} style={{ flex: 1 }} />
    </>
  )
}

関連項目

• ページレイアウト — 用紙サイズ・余白と、usePageBreaks が従う改ページプレビュー。
• ブラウザ印刷 — ブラウザの標準ダイアログによる簡易印刷。
• 画像 — エクスポートした PDF に表示されるセルアンカー画像。