高精度なHTML→PDF変換を
ブラウザだけで実現。
位置・サイズ・スタイルを正確に再現するHTML→PDF変換ライブラリ。
getBoundingClientRectを使用し、ブラウザのレイアウト計算結果をそのままPDFに変換します。
Why carboncopy?
既存のソリューションで抱えていたレイアウト崩れや日本語フォントの問題を解決するために設計されました。
ピクセルパーフェクト
getBoundingClientRectを使用し、ブラウザのレイアウト計算結果をそのままPDFに変換。CSSレイアウトを完全に再現します。
日本語完全対応
CIDフォント埋め込みによる日本語テキストの正確な描画を実現。生成されたPDFのテキストはコピー＆ペースト可能です。
テーブル・リスト
複雑なテーブルレイアウトやリストマーカーも正確に再現。border-collapseやcolspan/rowspanも期待通りに動作します。
画像埋め込み
JPEG/PNG画像のネイティブ埋め込みに対応。透明度（アルファチャンネル）や解像度の指定も柔軟に行えます。
軽量・依存最小
ブラウザのみで動作し、Puppeteerなどの重い依存関係は不要。バンドルサイズを最小限に抑えています。
柔軟なAPI
シンプルな高レベルAPIと、詳細な制御が可能なローレベルAPIの両方を提供。用途に応じて使い分けられます。
Live Demo
実際のHTML要素がどのようにPDFに変換されるかを確認してください。
「Convert to PDF」ボタンをクリックすると、表示されているプレビューがPDFとしてダウンロードされます。
INVOICE
#INV-2024-001
carboncopy Inc.
1-2-3 Tech District
Tokyo, Japan 100-0000
Bill To:
Acme Corp. / John Doe
| Item | Qty | Price | Total |
|---|---|---|---|
| Premium Plan | 1 | ¥5,000 | ¥5,000 |
| Additional Users | 3 | ¥1,000 | ¥3,000 |
| Total (Tax incl.) | ¥8,800 | ||
// Select the element
const element = document.getElementById("invoice");
// Convert to PDF
const result = await convert(element, {
format: "auto",
background: true
});
// Download
result.download("invoice.pdf");
Process happens entirely in your browser. No data leaves your device.