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 枚テーブルの動作にフォールバックします。

画像

v1.6.0 から、セルにアンカーした画像（ロゴ、印影など）が印刷出力にも描画されます。各印刷ページの帯を基準に配置され、帯と一緒に拡縮されるため、縮小率・改ページ・印刷範囲は PDF エクスポート と同じ結果になります。

toPagedHtmlDocument() は showImages を受け付けます。既定はシート側の設定に従います。

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

const html = toPagedHtmlDocument(ws, { showImages: false });

v1.6.0 より前は、ロゴが画面・PDF・xlsx には出るのに、HTML 印刷の経路だけ抜け落ちていました。

印刷の忠実度

v1.6.0 で、HTML 出力を canvas の描画に揃えました。以下の 3 点のずれによって、画面には出ている文字が紙で失われていました。

• 隣の空セルへはみ出すようになりました。 canvas は Excel と同じく、列幅より広い値を空の隣接セルへこぼしますが、<td> は必ずクリップするため「有効期限」が「有…」になっていました。溢れ幅は画面と同じ関数で求めます。
• 省略記号を付けなくなりました。 2px はみ出しただけで最後の 1 文字が「…」に化けていました。canvas も Excel も紙には省略記号を出さずクリップするだけです。
• 行が指定どおりの高さになりました。 <tr height> は HTML では最小値なので、折り返しのある明細行が伸びて後続の行がずれ、ページ下端の行が紙から落ちていました。折り返しうるセルを行高ちょうどに固定してクリップし、line-height も canvas と揃えています。

行より高い内容も、上下の行にこぼさず行でクリップするようになりました。

変わるのは印刷だけで、クリップボードへのコピーは別経路のため影響を受けません。

仕組み

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() メソッドが実装されている場合のみ印刷に反映されます。
• 印刷ダイアログからの「PDF に保存」はブラウザ自身の変換です。ヘッダー・フッターの付加やフォント置換が起こることがあります。出力を厳密に一致させたい場合は PDFエクスポート を使ってください。
• 表示形式のブラケット色（[赤]）はこの経路では反映されません。HTML 出力はセルスタイルの文字色を使います。PDF エクスポートでは反映されます。

関連項目

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