ReoGrid ReoGrid Web

ページレイアウト

v1.4.0 から、すべてのワークシートがページングモデル(用紙サイズ・向き・余白・スケール)と、ドラッグ・挿入可能な改ページを備えた画面上の改ページプレビューを持ちます。これは PDFエクスポート(usePageBreaks: true)を駆動し、xlsx へ往復するため、ReoGrid と Excel で同じようにページ分割されます。

Note: ページレイアウトは Pro 版で利用可能です。

印刷設定

ページングモデルはワークシート上で読み書きします。

import { createReogrid } from '@reogrid/pro'

const grid = createReogrid({ workspace: '#app' })
const ws = grid.worksheet

// 部分更新をマージ — 触れていないフィールドは値を保持します
ws.setPrintSettings({
  paperSize: 'A4',
  orientation: 'landscape',
  margins: { top: 15, right: 12, bottom: 15, left: 12 }, // mm
  scale: 1,                                              // 1 = 100%
})

const settings = ws.getPrintSettings()
console.log(settings.paperSize, settings.orientation)

PrintSettings

フィールド型既定値説明
paperSize'A3'|'A4'|'A5'|'B4'|'B5'|'Letter'|'Legal'|'Tabloid'|'Executive' または { widthMm, heightMm }'A4'用紙サイズ名または mm 指定のカスタムサイズ。
orientation'portrait' | 'landscape''portrait'ページの向き。
margins{ top, right, bottom, left }Excel 既定(左右 17.78 mm、上下 19.05 mm)余白(mm)。
scalenumber1内容のスケール係数。[0.1, 4] にクランプ。fitToPages の指定中は無視されます。
fitToPages{ width?, height? }—v1.6.0 — 横 N ページ・縦 N ページに収める。倍率は自動で求まります。
pageOrder'downThenOver' | 'overThenDown''downThenOver'getPrintPageRanges でページを走査する順序。

N ページに収める

v1.6.0 から、縮小率を手で決める代わりに「シートを何ページに収めるか」を指定できます。Excel の「N ページに収める」に相当します。

// すべての列を 1 ページ幅に(縦は何ページになっても構わない)
ws.setPrintSettings({ fitToPages: { width: 1 } })

// 横 1 ページ、縦は最大 2 ページ
ws.setPrintSettings({ fitToPages: { width: 1, height: 2 } })

軸を省略(または 0 を指定)すると、その方向は制限しません。Excel と同じく縮小のみで、すでに収まっている内容は 100% で印刷されます。

フィットが有効な間 scale は無視されますが、値は保持され、フィットを解除すると戻ります。

ws.setPrintSettings({ fitToPages: undefined })   // 設定していた scale が復帰します

実際に求まった倍率は次のように読めます。

ws.getEffectivePrintScale()   // 例: 0.72

改ページプレビュー・PDF エクスポート・ブラウザ印刷はすべてこの値で一致します。設定は xlsx(<pageSetUpPr fitToPage> と <pageSetup fitToWidth/fitToHeight>)と ReoGrid JSON を往復します。

ページヘッダーとフッター

v1.5.0 から、PrintSettings.headerFooter で用紙の余白部分にテキストを印刷できます — ページ番号、日付、シート名やファイル名など。Excel と同じ書式コードを使い、xlsx で往復します。

ws.setPrintSettings({
  headerFooter: {
    header: { center: '&"Meiryo"売上明細' },
    footer: { right: 'ページ &P / &N', left: '&D' },
  },
})

各帯は**左(left)・中央(center)・右(right)**のセクションを持ちます。帯は header と footer、加えて下記フラグで有効になる evenHeader / evenFooter、firstHeader / firstFooter があります。

書式コード

セクションのテキストは Excel と同じくコードをそのまま保持し、印刷時にページごとに展開されます。

コード展開結果
&P現在のページ番号(&P+2 / &P-1 でオフセット)
&N総ページ数
&D / &T日付/時刻
&Fファイル名
&Aシート名
&Zファイルパス
&&リテラルの &

装飾コード(&B、&12、&"Meiryo,Bold"、&KFF0000、&G)は認識した上で除去されます。PDF に埋め込まれるフォントは 1 ウェイトのため再現できず、そのまま文字として出力する方が問題が大きいためです。未知のコードはそのまま残すので、打ち間違いは黙って消えるのではなく目に見えます。

オプション

フィールド型既定値説明
header / footer{ left?, center?, right? }—既定の帯。全ページで使用されます。
evenHeader / evenFooter{ left?, center?, right? }—differentOddEven が有効なとき偶数ページで使用。
firstHeader / firstFooter{ left?, center?, right? }—differentFirst が有効なとき 1 ページ目で使用。
differentOddEvenbooleanfalse偶数ページで別の帯を使う(袋とじ・見開き用)。
differentFirstbooleanfalse1 ページ目に専用の帯を使う(表紙など)。

帯と用紙端との距離は margins.header / margins.footer(Excel の既定は 0.3 インチ)です。帯がその余白より高い場合は本文マージンを押し出すため、背の高いヘッダーはセルの上に重なるのではなく 1 ページあたりの行数を減らします。改ページ計算・PDF エクスポート・ページ分割印刷 HTML はいずれも同じジオメトリで一致します。

Note: 画面上の改ページプレビューでは帯自体は描画されません(枠で示される本文領域が縮むだけです)。実際の表示は印刷または PDF エクスポートで確認してください。

ヘッダー・フッターは xlsx の <headerFooter> と ReoGrid JSON(sheet.print.headerFooter)で往復するため、Excel で作成したテンプレートのページ番号設定がそのまま保たれます。

改ページプレビュー

ページ境界をグリッド上に直接表示する Excel 風のオーバーレイを切り替えます。

ws.setShowPageBreaks(true)   // 青い改ページ線を表示
ws.setShowPageBreaks(false)  // 非表示

プレビューを有効にすると、現在の印刷設定から計算されたページ帯にシートが分割されます。改ページ線をドラッグすると手動改ページとして固定でき、プログラムから挿入することもできます。

v1.6.0 から、改ページ線や印刷範囲の端のドラッグが、他のポインタ編集と同じくundo スタックに載ります — ドラッグ 1 回につき Ctrl+Z 1 回です。改ページ移動の undo は、そのドラッグが下げた印刷倍率と、巻き込んだ手動改ページも元に戻します。元の位置にそのまま落とし直した場合は undo ステップを消費しませんが、自動の線をその場に落とした場合は手動として固定されるため 1 ステップになります。

実行結果
60行のシートに対する改ページプレビュー。青い線が A4 横・100% で実際に切れる位置。(行データはこの画像のために補ったもの)
60行のシートに対する改ページプレビュー。青い線が A4 横・100% で実際に切れる位置。(行データはこの画像のために補ったもの)

手動改ページ

ws.insertRowPageBreak(40)     // 40 行目から新しいページを強制
ws.insertColumnPageBreak(8)   // 8 列目から新しいページを強制

手動改ページはプレビューと PDF エクスポートの両方で反映されます。結果のページ帯を確認するには次のようにします。

const pages = ws.getPrintPageRanges() // ページ順の PrintRange[]
pages.forEach((p, i) => {
  console.log(`ページ ${i + 1}: 行 ${p.topRow}〜${p.bottomRow}, 列 ${p.leftColumn}〜${p.rightColumn}`)
})

各 PrintRange は { topRow, leftColumn, bottomRow, rightColumn }(0 始まり・両端含む)です。getPrintPageRanges(order?) に PageOrder を渡すと、その呼び出しだけ pageOrder を上書きできます。

レイアウトからページ分割出力へ

PDF エクスポートはこのモデルをそのまま再利用できるため、ページレイアウトがページ分割の唯一の情報源になります。

import { preloadPdfFont } from '@reogrid/pro'

ws.setPrintSettings({ paperSize: 'A4', orientation: 'portrait', scale: 0.9 })
ws.insertRowPageBreak(50)

await preloadPdfFont('ja')
// usePageBreaks により、PDF はプレビューとまったく同じ位置で改ページされます
grid.saveAsPdf({ locale: 'ja', usePageBreaks: true, filename: 'ledger.pdf' })

xlsx への往復

印刷設定と手動改ページは .xlsx(<pageSetup>・<pageMargins>・<rowBreaks> / <colBreaks>)へ書き出し・読み戻しされるため、ReoGrid からエクスポートしたファイルは同じページ設定で Excel に開けます(逆も同様)。ReoGrid JSON でも往復します。

印刷範囲

setPrintableRange(...) は、印刷対象を 1 つの矩形に限定します。

ws.setPrintableRange({ topRow: 0, leftColumn: 0, bottomRow: 49, rightColumn: 7 })

v1.6.0 より前は ReoGrid JSON でしか往復しなかったため、xlsx に保存すると次に開いたときシート全体が印刷対象に戻っていました。現在は Excel と同じ _xlnm.Print_Area という定義名として書き出され、同じ形で読み戻されます。

印刷範囲を設定しないときに印刷される範囲

印刷範囲を設定していない場合、A1 から紙に何かが印刷される最後のセルまでが印刷されます。対象になるのは次のものです。

  • 値
  • 罫線(値のない罫線だけの枠も含む)
  • 白以外の塗りつぶし
  • 結合セルの全体(文字が入っている先頭のセルだけでなく)
  • ロゴや印影などの画像

フォント・表示形式・白の塗りつぶしのように、紙に何も印刷されない書式では範囲は広がらないため、空白のページが増えることはありません。範囲の終わりはワークシートで確認できます。

ws.getPrintContentExtent()   // { maxRow, maxColumn }(0 始まり)。何も印刷されなければ null

改ページプレビュー、PDF エクスポート(usePageBreaks の有無を問わず)、ページ分割したブラウザ印刷(printWorksheet(ws, { usePageBreaks: true }))のすべてがこの範囲を使います。v1.7.0 より前は、値の入った最後のセルまでで範囲が終わっていました。そのため、まだ行が空の罫線付きの表、結合した備考欄、押印欄といった一般的な帳票は最後に入力されたセルで切れてしまい、「N ページに収める」も、その一部だけが収まるように縮小していました。現在は帳票全体が印刷され、fitToPages も帳票全体を収めます。

関連項目

このページは役に立ちましたか?
ニュースレター

開発の最新情報をお届けします

新しいリリース・機能追加・お知らせをいち早く受け取るには、
メーリングリストにご登録ください。