ハイパーリンク

v1.7.0 から、セルにハイパーリンク（Excel の「挿入 → リンク」）を持たせられます。xlsx ファイル内のリンクは読み込まれ、表示され、クリックで開き、保存時にもそのまま書き戻されます。=HYPERLINK() 関数も使えます。

Note: リンクの読み込み（xlsx・ReoGrid JSON）、表示、クリックで開く動作は両エディションで利用できます。コードからのリンクの設定（setHyperlink・removeHyperlink・clearHyperlinks）は Pro 機能です。=HYPERLINK() も実質 Pro 限定です。組み込み関数の 1 つで、Lite には組み込み関数がないため #NAME? になります。

xlsx ファイルのリンク

ブックを読み込めば、そのままリンクが使えます。有効化の設定は不要です。

await grid.loadFromUrl('/data/links.xlsx')

リンクのあるセルをクリックすると、新しいタブでリンク先が開きます。
押したまま（約 0.6 秒）にすると、開かずにセルを選択します。Excel と同じ操作です。ドラッグして範囲選択になった場合も開きません。
ホバーすると指のカーソルになり、リンク先のアドレスをツールチップで表示します。リンクに「ヒント設定」があれば、その下にアドレスを表示します。コメントも付いているセルでは、コメントが優先されます。

Excel の青い下線付きの「ハイパーリンク」の見た目は普通のセル書式なので、他のスタイルと同じくファイルから読み込まれます。リンク自体はセルの見た目を変えません。

フォームモードの clickToEdit が有効でも、リンクのあるセルをクリックするとエディタは開かず、リンクを開きます。

リンクを設定する（Pro）

import { createReogrid } from '@reogrid/pro'

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

// 値と書式は自分で設定する…
ws.cell('B2')
  .setValue('ReoGrid Web ドキュメント')
  .setStyle({ color: '#0563c1', underline: true })

// …リンクは行・列（0 始まり）で設定する。行 1・列 1 = B2
ws.setHyperlink(1, 1, 'https://web.reogrid.net/jp/docs/')

// ホバー時のヒントも付ける
ws.cell('B3').setValue('サポートへのお問い合わせ')
ws.setHyperlink(2, 1, 'mailto:[email protected]', { tooltip: 'メールアプリが開きます' })

リンクはセルの属性です。クリックしたときの動作だけを決め、値と書式には触れません。リンクらしく見せたい場合は、セルのスタイルを自分で設定してください。リンクは 1 セルに 1 つで、もう一度設定すると置き換わります。

読み取りと削除

ws.getHyperlink(1, 1)     // { row: 1, col: 1, url: 'https://web.reogrid.net/jp/docs/' }
ws.hasHyperlink(1, 1)     // true
ws.getHyperlinks()        // シート上のすべてのリンク

ws.removeHyperlink(1, 1)  // 削除できたら true
ws.clearHyperlinks()      // 削除した件数

メソッド	エディション	説明
`setHyperlink(row, col, url, { tooltip? })`	Pro	セルにリンクを設定。セルハンドルでは `cell.setHyperlink(url, options?)`。
`removeHyperlink(row, col)`	Pro	セルのリンクを削除。`cell.removeHyperlink()` も同じ。
`clearHyperlinks()`	Pro	シート上のリンクをすべて削除。
`getHyperlink(row, col)` / `getHyperlinks()` / `hasHyperlink(row, col)`	両方	保存されているリンクを読み取る。`cell.getHyperlink()` も同じ。
`getHyperlinkTarget(row, col)`	両方	クリックしたときに開く先（セルのリンク、または `=HYPERLINK()` のアドレス）。なければ `null`。
`followHyperlink(row, col)`	両方	クリックと同じようにリンクを開く。タブを開いたら `true`。

コードから設定したリンクは、コメントと同じく元に戻す（Undo）の対象になりません。コピー＆ペーストでもリンクは運ばれません。

`=HYPERLINK()`（Pro）

ws.cell('B5').value = '=HYPERLINK("https://web.reogrid.net/jp/demos/", "ライブデモ")'

セルにはラベル（省略時はアドレス）が表示され、クリックするとアドレスが開きます。アドレスは他の引数と同じく計算で作れます。

ws.cell('A6').value = '1024'
ws.cell('B6').value = '=HYPERLINK("https://example.com/orders/" & A6, "注文を開く")'

リンクとして開くのは、式そのものが HYPERLINK の呼び出しであるセルだけです。=IF(A1>0, HYPERLINK(…), "") のように他の関数の中に入れた場合、ラベルは表示されますがクリックしても開きません。

開くアドレス

開くのは、絶対 URL の http:・https:・mailto:・tel: だけです。それ以外 — javascript:・data:・file: のパスや、ブックの隣にあったファイルを指す相対パス — は開かず、セルに短いメッセージ（「This link can’t be opened here: …」）を表示します。リンクは他人から届いたファイルに含まれていることもあるため、ページ内でスクリプトを実行させることはありません。
新しいタブで noopener,noreferrer を付けて開きます。開いたページは元のページへの window.opener を持たず、元のページの URL も Referer として送られません。
ブック内の場所へのリンク（Sheet2!A1、Excel の「このドキュメント内」）は保持され、保存時にも書き戻されますが、まだ移動はしません。クリックしても何も起きません。

クリックを自分で処理する

onHyperlinkClick は、何かを開く前に呼ばれます。event.cancel = true にすると ReoGrid はアドレスを開かないので、アプリ内でのルーティングや確認、ReoGrid が開かないアドレスの独自処理などを自分で行えます。

grid.onHyperlinkClick((event) => {
  // event: { row, col, url, cancel } — url はセルに保存されたままの値
  const url = new URL(event.url, location.href)
  if (url.origin === location.origin) {
    event.cancel = true          // 新しいタブは開かずに…
    location.assign(url.href)    // …このタブで移動する
  }
})

インスタンスのリスナーはアクティブシートに追従します。シート単位で受け取るなら worksheet.onHyperlinkClick(listener) を使います。どちらも購読解除関数を返します。

sandbox 付きの iframe の中で使う場合

グリッドを <iframe sandbox> の中で動かしている場合は、sandbox の外へ出るポップアップを許可してください。許可がないと、ブラウザは何も表示せずに新しいタブをブロックします。

<iframe src="/sheet.html"
        sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>

allow-popups-to-escape-sandbox がないと、開いたページにも sandbox が引き継がれ、多くのサイトが正常に動きません。

編集にリンクが追従する

行・列の挿入と削除、並べ替え、ドラッグによる範囲の移動では、リンクはセルと一緒に動きます。リンクのある行・列を削除するとリンクも消えます。reset() ですべて消去されます。

xlsx と ReoGrid JSON

xlsx — <hyperlinks> を両エディションで読み込み、Pro の saveAsXlsx で書き出します。Web・メールのアドレス、ブック内の場所、ヒント設定がすべて往復します。
ReoGrid JSON — 各シートが hyperlinks: [{ row, col, url?, location?, tooltip? }] を持つため、grid.toJson() / grid.loadJson() でもリンクが保たれます。