mcpField
O
onepage-pdf

onepage-pdf

github.com/acedatacloudドキュメント17206 回インストール今日更新
リポジトリ

onepage-pdf について

onepage-pdf は HTML を縦長の 1 ページ PDF にレンダリングし、実際のコンテンツの高さに合わせて切り抜きます。Web レイアウトを PDF 化する用途向けで、CSS の修正やテキストのマスキングにも対応します。

主な機能

  1. 01ヘッドレス Chrome で HTML を描画
  2. 02測定したコンテンツ高で PDF を切り抜き
  3. 03追加 CSS の上書きを適用
  4. 04テキスト置換と禁止語チェック
  5. 05出力が 1 ページであることを確認

活用シーン

  1. 01Web レイアウトを縦長 PDF に変換
  2. 02印刷時のレスポンシブレイアウト問題を修正
  3. 03PDF 公開前にテキストをマスキング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/acedatacloud/skills --skill onepage-pdf

インストール後、Claude Code で/onepage-pdfを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE
examples/
demo-fixes.css
demo.html
references/
mechanics.md
scripts/
onepage_pdf.py

詳細

onepage-pdf

github.com/xntj-ai/onepage-pdf からベンダー提供されたものです。 张拼拼 · XNTJ によるもので、MIT License の下で提供されています。詳細は LICENSE を参照してください。

ヘッドレス Chrome で HTML を縦長の PDF 1 ページにレンダリングし、PyMuPDF でページを実際のコンテンツの高さまでトリミングします。高さは予測しません（印刷レイアウトと画面レイアウトは異なるため）。レンダリング後に測定するので、正確です。

必要環境： pymupdf をインストールした Python と、ローカルの Chrome または Edge。API トークンは不要です。

ワークフロー

1. まずソース HTML を確認する

HTML を読み、4 つの点を確認します。これらによって --extra-css が必要かどうかが決まります。

  1. レスポンシブブレークポイント。 印刷メディアクエリは @page サイズではなく、デフォルトの用紙幅（約741px）に対して評価されます。N ≥ 741 の @media (max-width: N) は印刷時に適用され、デスクトップレイアウトが崩れる可能性があります。そのようなルールごとに、デスクトップの値を !important で固定するオーバーライドを記述してください（例：.grid{grid-template-columns:repeat(3,1fr)!important}）。
  2. グラスモーフィズム。 backdrop-filter のぼかしは、PDF 出力では通知なしに無効になります。グラス要素が複雑な背景の上にある場合は、印刷用の代替スタイルを追加してください。 .glass{backdrop-filter:none!important;background:rgba(255,255,255,.88)!important}。
  3. スクロール連動の表示アニメーション。 一般的なクラスパターン（fade*、reveal*、animate*、aos）は自動的に表示状態になります。それ以外で opacity:0 から始まるものには、opacity:1!important の明示的なオーバーライドが必要です。
  4. vh/vw によるサイズ指定。 ビューポート単位は印刷時にページ領域を基準に解決され、約1%ずれます。min-height:100vh のヒーロー要素は、巨大なページ上で約187inの高さになります。このようなルールは固定 px 値でオーバーライドしてください。

すべてのオーバーライドを1つの CSS ファイルにまとめ、--extra-css で渡します。

2. 変換する

以下のパスは、このスキルのディレクトリを基準とします。

python scripts/onepage_pdf.py input.html -o output.pdf --width 1280 \
    [--extra-css fixes.css] [--replace subs.json --forbid words.txt]
  • --width：ページのデザイン幅に合わせます（8px 単位にスナップします。8px 単位でないページサイズは MediaBox の丸め処理の不具合を引き起こし、不要なページが生成されます）。
  • --replace：JSON [["old","new"], ...]。記載順に適用されます。長く、より具体的な文字列を先に指定してください。公開前の墨消しに使用します。
  • --forbid：1行につき1語を指定します。HTML または最終 PDF のテキストレイヤーに1つでも残っていると、スクリプトは中断します。必ず --replace と併用してください。
  • --crop pixel：ベクターのトリミングで判定を誤る場合（例：装飾要素が実際のコンテンツより下まで描画されている場合）に、ラスターの行スキャンに切り替えます。

スクリプトは、オーバーフロー時の自動再試行を伴う巨大ページへのレンダリング、コンテンツのトリミング（ビューアーとの互換性のため、MediaBox と CropBox を同一の値に書き換えます）、CJK 対応の出力パス、1ページであることの検証を自動処理します。

examples/ に同梱のサンプルがあります。最初から最後まで実行してみてください。

python scripts/onepage_pdf.py examples/demo.html -o /tmp/demo.pdf \
    --width 1280 --extra-css examples/demo-fixes.css
3. 検証する

スクリプトは OK 1 page, WxHpt と出力します。次に、以下を行います。

  1. サムネイルをレンダリングして目視確認します（レイアウトが保たれていること、グリッドが崩れていないこと、背景が表示されていること、下部が切れていないこと）。 
    import pymupdf
doc = pymupdf.open("output.pdf")
doc[0].get_pixmap(dpi=40).save("check.png")
  2. 墨消しを行った場合、PDF のテキストに対する禁止語チェックはすでに実行されています。それでも、レンダリング画像を確認して、ラスター形式で機密情報が残っていないか確認してください。
  3. スクリプトの警告に注意してください。高さが14400ptを超えると Acrobat で問題が発生します（Chrome、Firefox、WeChat のプレビューでは問題ありません）。「content nearly fills the bedrock」と表示された場合は、末尾が切れていないか確認してください。

トラブルシューティングと仕組み

出力に問題がある場合（レイアウトの崩れ、背景の欠落、空白ページ、不要な2ページ目、CJK グリフのぼやけや欠落）は、references/mechanics.md を参照してください。このツールの基盤となる Chrome の印刷レンダリングルールと、CDP ベースの代替手順について説明しています。

コメント

Markdown 対応