New为 React 准备的可打印页面
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，输出页面。
一个组件，三个步骤，屏幕上和纸上是同样的页面。
- 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 页报告中修改一个词，直到新页面提交
- 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 没有增量更新，编辑时会从头重新渲染。三者得到的页数相同。
当前 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 的浏览器客户端。