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] にクランプ。
pageOrder'downThenOver' | 'overThenDown''downThenOver'getPrintPageRanges でページを走査する順序。

改ページプレビュー

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

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

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

手動改ページ

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 { loadDefaultJapaneseFont } from '@reogrid/pro'

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

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

xlsx への往復

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

関連項目

ニュースレター

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

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