PDFを書き出す

現在のワークシートから印刷品質のPDFを、サーバー往復も外部PDFライブラリも使わず、ブラウザだけで生成します。v1.4 で追加されました。

Pro 限定。 saveAsPdf / exportPdf は Lite では何もしません。有効な licenseKey が必要です。

フォントが最重要

PDFエンジンは TrueType（glyf）フォントを埋め込むため、フォントが必須です。v1.5 からは locale を指定するのが最も簡単な方法です — 'ja'・'zh-CN'・'zh-TW'・'ko' が標準登録されています:

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

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

// ...populate the grid...

// フォントのダウンロードは、自分で制御できる非同期地点で一度だけ（以降はキャッシュ）:
await preloadPdfFont('ja');

// エクスポート自体は同期 — 以降はどのクリックハンドラからでも呼べます。
grid.saveAsPdf({ locale: 'ja', filename: 'report.pdf' });

本番環境では、対応するサブセットパッケージをインストールして登録することを推奨します — バイト列は npm から供給されるため、実行時のネットワークアクセスが一切なくなります:

// npm install @reogrid/font-jp   （ほかに 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' });

ReoGrid が知らないフォントを使う場合は font に自前のバイト列を渡します — PDF エクスポートを参照してください。

filename を省略すると、読み込んだドキュメントのベース名が既定になります（purchase-order.xlsx → purchase-order.pdf）。

画面のプレビューと同じ改ページで出力

先に Excel 風のページレイアウトを設定し、usePageBreaks: true を渡すと、改ページプレビューと同じ位置で改ページされます（手動改ページ・印刷範囲・ページ内に収める倍率も含む）:

const ws = grid.worksheet;

ws.setPrintSettings({
  paperSize: 'A4',
  orientation: 'landscape',
  margins: { top: 12, right: 12, bottom: 12, left: 12 },
  scale: 1,
  headerFooter: { footer: { right: 'ページ &P / &N' } },  // v1.5 — Excel の書式コード
});
ws.insertRowPageBreak(40); // 40行目で改ページ

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

usePageBreaks: true のときは、オプション側の pageSize / orientation / marginMm / scale / fitToWidth / range は無視されます。代わりに setPrintSettings() で設定してください。

ダウンロードせずにバイト列を取得

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

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

ボタンから（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'); }, []);  // 先にフォントキャッシュを温めておく

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

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

よく使うオプション

関連

• PDF エクスポート
• ページレイアウト
• 帳票テンプレートを差し込む