KO

NewReact를 위한 인쇄용 페이지

Imposia

HTML과 CSS를 실제 페이지로 만듭니다. 앱 안에서 미리 보고, 인쇄하거나 PDF로 저장하세요. 모두 브라우저에서 동작합니다.

pnpm add @imposia/reactimport { ImposiaPageViewer } from "@imposia/react"
시작하기GitHub라이브 데모

WHY IMPOSIA

페이지를 만드는 데 필요한 모든 것

지금 쓰는 HTML과 CSS는 그대로 두세요. 페이지는 Imposia가 나눕니다.

  • HTML로 만드는 실제 페이지

    기존 마크업을 여백, 머리글, 쪽 번호가 있는 정해진 크기의 페이지로 배치합니다.

  • 브라우저 인쇄와 PDF

    print()는 브라우저의 인쇄 창을 엽니다. 사용자는 종이로 인쇄하거나 PDF로 저장을 고릅니다.

  • 반쯤 만든 화면이 없음

    다음 페이지 묶음은 화면 밖에서 완성합니다. 레이아웃이 끝났을 때만 미리보기를 교체합니다.

  • 어디서나 같은 문서

    미리보기와 인쇄가 같은 확정 페이지를 읽으므로 페이지 수가 어긋나지 않습니다.

  • React 우선, 프레임워크 무관

    <ImposiaPageViewer />를 넣거나, 어떤 프레임워크에서든 @imposia/core를 직접 사용하세요.

  • 통제된 리소스 로딩

    이미지, 폰트, 스타일시트는 모두 assetResolver를 거칩니다. 예상하지 못한 네트워크 요청이 없습니다.

HOW IT WORKS

HTML을 넣으면 페이지가 나옵니다.

컴포넌트 하나, 세 단계. 화면과 종이에 같은 페이지가 나옵니다.

  1. 01

    HTML 전달

    페이지 크기와 여백과 함께 HTML 문자열을 뷰어에 넘기세요. 작성한 CSS는 그대로 적용됩니다.

  2. 02

    Imposia가 페이지를 나눔

    페이지는 준비용 프레임에서 배치됩니다. 새 페이지가 준비될 때까지 마지막으로 완성된 페이지가 화면에 남습니다.

  3. 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회 동안 화면에 보인 미완성 페이지 묶음
실시간 수정 지연 · 50페이지낮을수록 좋음
  • Imposia30 ms
  • Paged.js217 ms
  • Vivliostyle212 ms
페이지 분할 · 200페이지낮을수록 좋음
  • Imposia131 ms
  • Paged.js849 ms
  • Vivliostyle2154 ms
번들 크기전체 브라우저 번들, gzip, 낮을수록 좋음
  • Imposia68.4 KiB
  • Paged.js94.2 KiB
  • Vivliostyle215.2 KiB

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로 시작하고, 필요하면 더 낮은 계층으로.

npm에서 보기
  • 추천@imposia/react

    React 18 이상을 위한 ImposiaPageViewer 컴포넌트와 hooks.

  • @imposia/core

    진단 정보를 제공하는 프레임워크 독립 페이지 분할 엔진.

  • @imposia/viewer

    단일·펼침 보기, 확대·축소, 페이지 이동을 제공하는 뷰어.

  • @imposia/client

    페이지 분할과 뷰어 API를 함께 제공하는 브라우저 클라이언트.

당신의 HTML은 이미 문서입니다.

컴포넌트 하나로 페이지를 입히세요.

문서 읽기