HTML で印刷（ブラウザ印刷）

printWorksheet() はワークシートをスタイル付き HTML テーブルに変換し、ブラウザの標準印刷ダイアログを開きます — その場での印刷に最も手軽な経路です。追加インストールもフォント読み込みも不要で、ダイアログ内で「PDF に保存」を選ぶこともできます。

ブラウザ印刷はPro版で利用可能です。

全体像をお探しですか？ 印刷 でこの経路と PDF エクスポート・ページ設定を比較できます。厳密で自己完結したファイルが必要なら PDFエクスポート を使ってください。

基本的な使い方

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

printWorksheet(grid.worksheet);

印刷オプション

printWorksheet(grid.worksheet, {
  pageSize: 'A4',
  orientation: 'landscape',
  margin: '10mm',
  showHeaders: true,
  showGridLines: true,
  title: '売上レポート',
  fitToPage: true,
});

PrintOptions

usePageBreaks による複数ページ出力

デフォルトではシート全体が 1 枚の長い HTML テーブルになり、どこで切れるかはブラウザが決めます。usePageBreaks: true を指定すると、ワークシート自身のページングモデルでページ割りします — 用紙サイズ・印刷方向・余白・倍率は worksheet.getPrintSettings() から、各ページは worksheet.getPrintPageRanges() から取られ、手動改ページやドラッグした改ページも含めて 1 ページがちょうど 1 枚として印刷されます。

const ws = grid.worksheet;

ws.setPrintSettings({ paperSize: 'A4', orientation: 'landscape' });
ws.insertRowPageBreak(40);        // 40 行目から新しいページにする

printWorksheet(ws, { usePageBreaks: true });

これにより、画面上の ページレイアウト プレビューと同じ位置でページが分かれます。ページ割りする対象がない場合（印刷範囲が明示されていない空のシートなど）は、1 枚テーブルの動作にフォールバックします。

仕組み

printWorksheet() は以下の処理を行います。

1. ワークシートのデータを HTML テーブルに変換
2. 非表示の iframe を作成
3. HTML テーブルと CSS を挿入
4. iframe の print() を呼び出す

セルスタイル（フォント、色、罫線、セル結合など）は HTML/CSS に変換されます。

使用例：React での印刷ボタン

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

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

  function handlePrint() {
    if (gridRef.current) {
      printWorksheet(gridRef.current.worksheet, {
        title: '月次レポート',
        orientation: 'landscape',
      });
    }
  }

  return (
    <>
      <button onClick={handlePrint}>印刷</button>
      <Reogrid ref={gridRef} style={{ flex: 1 }} />
    </>
  );
}

使用例：Vue での印刷ボタン

Vue コンポーネントは、テンプレート ref の instance プロパティ（gridRef.value?.instance）としてグリッドを公開します。printWorksheet にはそこから取得したワークシートを渡します。

<script setup lang="ts">
import { ref } from 'vue';
import { Reogrid, type ReogridInstance } from '@reogrid/pro/vue';
import { printWorksheet } from '@reogrid/pro';

const gridRef = ref<{ instance: ReogridInstance | null } | null>(null);

function handlePrint() {
  const worksheet = gridRef.value?.instance?.worksheet;
  if (worksheet) printWorksheet(worksheet, { usePageBreaks: true });
}
</script>

<template>
  <button @click="handlePrint">印刷</button>
  <Reogrid ref="gridRef" style="width: 100%; height: 400px" />
</template>

注意事項

• ブラウザの印刷ダイアログが表示されます。
• カスタムセルタイプ（プログレスバー、スパークラインなど）は renderHTML() メソッドが実装されている場合のみ印刷に反映されます。
• セル配置画像は HTML 出力に含まれません。画像を出力する必要がある場合は PDFエクスポート を使ってください。
• 印刷ダイアログからの「PDF に保存」はブラウザ自身の変換です。ヘッダー・フッターの付加やフォント置換が起こることがあります。出力を厳密に一致させたい場合は PDFエクスポート を使ってください。

関連項目

• 印刷 — 印刷経路の全体像と選び方。
• ページレイアウト — 用紙サイズ・余白・倍率と、usePageBreaks が従う改ページプレビュー。
• PDFエクスポート — ワークシートを本物のベクター PDF に出力。
• PDF・ページレイアウト デモ — 改ページプレビューと出力のライブデモ。