印刷

ワークシートをブラウザの印刷機能で印刷する方法を説明します。

印刷機能はPro版で利用可能です。

基本的な使い方

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

printWorksheet(grid.worksheet);

印刷オプション

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

PrintOptions

オプション	型	デフォルト	説明
`pageSize`	`string`	`'A4'`	用紙サイズ
`orientation`	`'portrait' \| 'landscape'`	`'portrait'`	印刷方向
`margin`	`string`	`'15mm'`	ページ余白（CSS 値）
`showHeaders`	`boolean`	`false`	行・列ヘッダーを印刷するか
`showGridLines`	`boolean`	`true`	グリッドラインを印刷するか
`title`	`string`	---	ページ上部に表示するタイトル
`fitToPage`	`boolean`	`false`	ページ幅に合わせて縮小

仕組み

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

ワークシートのデータを HTML テーブルに変換
新しいウィンドウを開く
HTML テーブルと CSS を挿入
window.print() を呼び出す

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

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

import { useRef } from 'react';
import { Reogrid, printWorksheet } from '@reogrid/lite/react';
import type { ReogridInstance } from '@reogrid/lite/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 }} />
    </>
  );
}

注意事項

ブラウザの印刷ダイアログが表示されます。
カスタムセルタイプ（プログレスバー、スパークラインなど）は renderHTML() メソッドが実装されている場合のみ印刷に反映されます。