表示倍率（ズーム）

v1.7.0 から、シートごとに Excel のズームボックスと同じ表示倍率を 10%〜400% で設定できます。両エディションで利用できます。

拡大・縮小されるのは表示だけです。行の高さ・列幅・フォント・印刷・PDF／xlsx への出力はすべて 100% のままなので、帳票全体を見渡すために縮小しても、保存される値は 1 つも変わりません。

const ws = grid.worksheet

ws.setZoom(1.5)   // 150%
ws.getZoom()      // 1.5
ws.setZoom(1)     // 100% に戻す

倍率を設定する

1 が 100% です。値は 0.1〜4（10%〜400%）にクランプされ、NaN・0・負の値は無視されます。

第 2 引数を省略すると、Excel のズームボックスと同じく左上のセルが動きません。canvas 上の CSS px の座標を渡すと、その点の下にあるシートの位置が動かないように拡大・縮小します。ホイール操作は、ポインタの位置をこの基準点にしています。

ws.setZoom(2, { x: 300, y: 200 })   // canvas 上の (300, 200) を中心に拡大

基準点が効くのは、その点がスクロール可能な本体の上にある軸だけです。見出しや固定枠の上では、スクロールさせる対象がないため補正しません。また、シートの端の近くではスクロール位置がクランプされるため、基準点が少しずれることがあります。

Ctrl/Cmd + ホイールとピンチ

グリッドの上で Ctrl + ホイール（macOS では Cmd + ホイール も可）を回すと、アクティブシートがポインタ位置を中心に拡大・縮小します。トラックパッドのピンチもブラウザには同じイベントとして届くため、そのまま滑らかにズームします。マウスホイール 1 ノッチでおよそ 15%、同じ量だけ戻せば元の倍率に戻ります。

v1.6 までは、この操作はブラウザのページズームにそのまま渡っていました。ページ側でそれを前提にしている場合は、操作を無効にできます。

import { createReogrid } from '@reogrid/lite'

const grid = createReogrid({ workspace: '#grid', wheelZoom: false })

wheelZoom: false でも setZoom() は使えます。止まるのはホイール操作だけです。キーボードショートカット（Ctrl+0 など）は割り当てていないので、ブラウザ側のショートカットはそのまま使えます。

倍率はシートごと

Excel と同じく、倍率はシートごとに保持されます。あるシートを 75% にして別の 100% のシートに切り替え、戻ってくると 75% のままです。

倍率の変化を受け取る

インスタンスで購読すると、リスナーはアクティブなシートに自動で追従します。

const label = document.querySelector('#zoom-label')!

const show = (zoom: number) => {
  label.textContent = `${Math.round(zoom * 100)}%`
}

grid.onZoomChange(show)

// シートの切り替えは倍率の「変化」ではないので、切り替え先の倍率を読み直す
grid.workbook.onActiveSheetChange(() => show(grid.worksheet.getZoom()))

リスナーが呼ばれるのは値が実際に変わったときだけです（Ctrl/Cmd + ホイール、setZoom()、倍率を持つ xlsx の読み込み）。シート単位で受け取るなら worksheet.onZoomChange(listener) を使います。どちらも購読解除関数を返します。

ズームボックスを作る

// <select id="zoom">
//   <option value="0.5">50%</option> <option value="1" selected>100%</option>
//   <option value="1.5">150%</option> <option value="2">200%</option>
// </select>
const select = document.querySelector<HTMLSelectElement>('#zoom')!

select.addEventListener('change', () => {
  grid.worksheet.setZoom(Number(select.value))
  grid.focus()   // キーボード操作をグリッドに戻す
})

React と Vue

v1.7.0 の React／Vue コンポーネントには、倍率専用の prop やイベントはありません。コンポーネントから受け取ったインスタンスで購読してください。

// React
import { useState } from 'react'
import { Reogrid } from '@reogrid/lite/react'

function Sheet() {
  const [zoom, setZoom] = useState(1)
  return (
    <>
      <span>{Math.round(zoom * 100)}%</span>
      <Reogrid
        style={{ height: 400 }}
        onReady={(grid) => { grid.onZoomChange(setZoom) }}
      />
    </>
  )
}

<!-- Vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { Reogrid, type ReogridInstance } from '@reogrid/lite/vue'

const zoom = ref(1)
function onReady(grid: ReogridInstance) {
  grid.onZoomChange((z) => { zoom.value = z })
}
</script>

<template>
  <span>{{ Math.round(zoom * 100) }}%</span>
  <Reogrid style="width: 100%; height: 400px" @ready="onReady" />
</template>

100% のまま変わらないもの

倍率が掛かるのは、シートが画面に映る部分だけです。計測・保存・印刷されるものはすべて 100% の値を保ちます。

xlsx の倍率

シートの zoomScale を読み書きするため、Excel で 85% にして保存したブックは 85% で開き、85% のまま保存されます。改ページプレビューやページレイアウト表示で保存されたシートでは、標準表示の倍率（zoomScaleNormal）を使います。xlsx には整数の % で保存されるため、ピンチで 123.4% になった倍率は 123% として書き出されます。

倍率は閲覧側の設定で、シートの内容ではありません。

• xlsx を読み込むと、ファイルの倍率が適用されます（記録がなければ 100%）。
• reset() と loadJson() は倍率を変えません。ReoGrid JSON にも倍率は保存されません。

独自の要素を重ねる場合

getCellRect()・getRangeRect()・getImageRect() が返すのは 100% のシート px です。これを使ってグリッドの上に独自の要素を配置している場合は、倍率を掛けてください。

const ws = grid.worksheet

// 絶対配置した独自の要素。左上がグリッドの canvas の左上と揃う
// コンテナの中に置いておく
const badge = document.querySelector<HTMLElement>('#badge')!

function placeBadge(row: number, col: number) {
  const r = ws.getCellRect(row, col)   // 100% のシート px
  const z = ws.getZoom()
  badge.style.left = `${r.x * z}px`
  badge.style.top = `${r.y * z}px`
  badge.style.width = `${r.width * z}px`
  badge.style.height = `${r.height * z}px`
}

placeBadge(2, 1)

// 倍率やスクロール位置が変わるたびに置き直す
ws.onZoomChange(() => placeBadge(2, 1))
ws.onScrollChange(() => placeBadge(2, 1))

独自の DOM を重ねていないコードは、変更不要です。

制限

• 合成した倍率が整数にならない場合（標準ディスプレイで 90% など）、細い線がわずかに薄く見えることがあります。Windows の表示スケール 125%／150% と同じ性質です。
• 倍率は ReoGrid JSON に含まれません。アプリで覚えておきたい場合は、ホスト側で保存してください。

関連ページ

• 表示倍率のデモ — Ctrl/Cmd + ホイール、ピンチ、ズームボックスを実際のシートで試せます。
• グリッドオプション — wheelZoom をはじめとする createReogrid() のオプション。
• マルチシートワークブック — シートごとの状態と、アクティブシートに追従するインスタンスイベント。
• ページレイアウト — 印刷の倍率と「N ページに収める」（表示倍率とは別の設定）。
• XLSXインポート・エクスポート — ファイルと一緒に往復するその他の設定。