NewReact のための印刷可能なページ
Imposia
HTML と CSS を本物のページにします。アプリ内でプレビューし、印刷または PDF として保存。すべてブラウザーで動きます。
pnpm add @imposia/reactimport { ImposiaPageViewer } from "@imposia/react"WHY IMPOSIA
ページを届けるために必要なものすべて
今ある HTML と CSS はそのまま。ページは Imposia が組みます。
HTML から本物のページ
既存のマークアップを、余白・柱・ノンブル付きの決まったサイズのページに組版します。
ブラウザー印刷と PDF
print() はブラウザーの印刷ダイアログを開きます。読者は紙に印刷するか、PDF として保存を選べます。
作りかけの画面を見せない
次のページセットは画面外で完成させます。レイアウトが終わったときだけプレビューを切り替えます。
どこでも同じドキュメント
プレビューと印刷が同じ確定ページを読むので、ページ数がずれません。
React ファースト、フレームワーク非依存
<ImposiaPageViewer /> を置くだけ。どのフレームワークからでも @imposia/core を直接使えます。
制御されたリソース読み込み
画像・フォント・スタイルシートはすべて assetResolver を通ります。想定外のネットワーク要求はありません。
HOW IT WORKS
HTML を入れれば、ページが出る。
コンポーネント 1 つ、3 ステップ。画面にも紙にも同じページ。
- 01
HTML を渡す
ページサイズと余白を添えて、HTML 文字列をビューアーに渡します。CSS はそのまま適用されます。
- 02
Imposia がページ分割
ページは準備用フレームで組まれます。新しいセットが整うまで、最後に完成したページが画面に残ります。
- 03
プレビュー、印刷、保存
読者はアプリ内でページをめくり、同じ結果を印刷または PDF として保存します。
import { useRef } from "react";
import { ImposiaPageViewer, type ImposiaPageViewerHandle } from "@imposia/react";
import "@imposia/react/styles.css";
export function Report({ html }: { html: string }) {
const viewer = useRef<ImposiaPageViewerHandle>(null);
return (
<>
<ImposiaPageViewer
ref={viewer}
source={{ html }}
documentOptions={{ page: { size: "A4", margin: "18mm" } }}
/>
<button onClick={() => viewer.current?.print()}>
Print or save as PDF
</button>
</>
);
}
BENCHMARKS
主張ではなく、計測値。
同じフィクスチャー、同じブラウザーで、リポジトリのベンチマークスクリプトが記録しました。どの数値もクローンし直して再計測できます。
Apple M4 · Chromium 149 · 中央値・計測回数 7
- 編集 → ページ更新
- 30ms
- 50 ページのレポートで単語を 1 つ変えてから新しいページが確定するまで
- 200 ページ
- 131ms
- 200 ページの文書を HTML から確定ページまで分割する時間
- print() → ダイアログ
- 1.1ms
- print() の呼び出しから、ブラウザーに印刷ダイアログを要求するまで
- 未完成フレーム
- 0フレーム
- 20 回の連続更新中に画面に出た未完成のページセット
Imposia main@4177daa · Paged.js 0.4.3 · Vivliostyle 2.45.2 · 計測コード: scripts/benchmark-compare.ts, scripts/benchmark.ts · pnpm benchmark:compare
Paged.js と Vivliostyle には差分更新がないため、編集のたびに最初から描画し直します。3 つとも同じページ数になりました。
現在の Imposia バンドル測定: Imposia 0.6.0 · 2026-09-27 · pnpm bundle:size
PACKAGES
React から始めて、必要なら下のレイヤーへ。
- おすすめ@imposia/react
React 18 以降向けの ImposiaPageViewer コンポーネントと hooks。
- @imposia/core
診断情報付きのフレームワーク非依存ページ分割エンジン。
- @imposia/viewer
単ページ・見開き表示、ズーム、ページ移動を備えたビューアー。
- @imposia/client
ページ分割とビューアーの API をまとめたブラウザークライアント。