PDFを書き出す

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

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

フォントが最重要

PDFエンジンは TrueType（glyf）フォントを埋め込むため、フォントを必ず渡す必要があります。CJK テキストをそのまま扱える最も簡単な方法がこちらです:

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

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

// ...populate the grid...

// 同梱の Noto Sans JP（約9.6MB、初回のみ取得し以降は Cache Storage から）。
const font = await loadDefaultJapaneseFont();

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

本番環境では、実際に必要なグリフだけのサブセットをホストして loadFont で読み込むことを推奨します（フルの CJK フォントよりはるかに小さくなります）:

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

const font = await loadFont('https://cdn.example.com/fonts/NotoSansJP-Subset.ttf');
grid.saveAsPdf({ font, filename: 'report.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,
});
ws.insertRowPageBreak(40); // 40行目で改ページ

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

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

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

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

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

ボタンから（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}>PDFを書き出す</button>
      <Reogrid ref={ref} options={{ licenseKey: 'YOUR-LICENSE-KEY' }} style={{ width: '100%', height: 500 }} />
    </>
  );
}

よく使うオプション

オプション	既定値	補足
`font`	— （必須）	TrueType `glyf` のバイト列（`ArrayBuffer \| Uint8Array`）。
`pageSize`	`'A4'`	`'A3'`…`'Executive'`、または `{ widthMm, heightMm }`。
`orientation`	`'portrait'`	`'portrait' \| 'landscape'`。
`marginMm`	`12`	数値（全辺）または `{ top, right, bottom, left }`。
`usePageBreaks`	`false`	改ページプレビューと同じ改ページで出力（上記参照）。
`filename`	読込ドキュメント名	`saveAsPdf` のみ。