Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Bug][pdf-plugin] html2pdf-next.js 的 @page 检测只扫行内 <style>，误注入 20mm 边距导致分页膨胀

オープン 初心者向け
  • 何か問題がありますか？
#107 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
76/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, javascript, nodejs
領域
cli

調査の方向性

バグは html2pdf-next.js の preRenderHooks ステップ5にある @page の検出処理にあり、そこでは document.querySelectorAll('style') が使われています。外部スタイルシートに @page { size: A4; margin: 8mm; } を置いた最小限のページで、node html2pdf-next.js page.html -o out.pdf を実行して再現してください。外部リンクの場合に作成者の余白が保たれ、ページが @page を宣言していない場合にはフォールバックの @page { margin: 20mm; } が引き続き適用されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Description

html2pdf-next.js 的 preRenderHooks 第 5 步用 document.querySelectorAll('style') 判断页面是否声明过 @page。当 @page 写在外部样式表（<link>）里时会被误判为缺失，随后注入 @page { margin: 20mm; }；该行内样式生效晚于 <link>，会覆盖作者边距、压缩可用页高，把本可容纳的内容挤出额外页。

Steps to Reproduce（最小复现）

同一最小 HTML（内容样式全部 inline；@page { size: A4; margin: 8mm; } 单独放外链 CSS），用未打补丁的发行版/上游版本执行 node html2pdf-next.js page.html -o out.pdf：

导出方式（同一页面） 页顶起点（量化 bbox） 页数
外链 CSS 的 @page（8mm） 20.1mm（被注入的 20mm 覆盖） 2
同一条 @page 改经 --css 行内注入 7.8mm 1
页面完全不声明 @page（fallback 生效对照） 22.2mm 1

页顶起点 20.1mm → 7.8mm 的翻转证明：缺陷不在排版，而在"检测只扫行内 <style>"这一处。

Expected Behavior

作者声明的 @page 边距被尊重；fallback 注入仅在页面确实未声明 @page 时发生。

Actual Behavior

外链 @page 被无视，行内 @page { margin: 20mm; } 覆盖作者边距，可用页高两页共缩水约 190px，内容溢出到额外空白内容页。

Suggested Fix

检测范围扩展到 document.styleSheets（含 <link> 样式表）：

const hasPageRule = Array.from(document.styleSheets).some(sheet => {
  try {
    return Array.from(sheet.cssRules || []).some(
      r => typeof r.cssText === 'string' && r.cssText.includes('@page'));
  } catch { return false; } // 跨域样式表无访问权限时按未命中处理
});

已实测该修复：外链场景恢复作者 8mm 边距；页面完全无 @page 时 fallback 仍生效（无回归）。

Environment

  • OS：Windows 11
  • 版本：pdf-plugin 0.1.8（ZCode 安装包内置）；Playwright Chromium Headless Shell 156
主要言語
Python
スター
103
フォーク
78
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

zai-org/zcode-plugins のほかの issue

zai-org/zcode-plugins の issue をすべて見る

似ている issue

Python の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。