Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#107 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, javascript, nodejs
Área
cli

Línea de trabajo

El error está en la detección de @page en el paso 5 de preRenderHooks de html2pdf-next.js, que usa document.querySelectorAll('style'). Reprodúcelo con una página mínima que coloque @page { size: A4; margin: 8mm; } en una hoja de estilos externa, ejecutando node html2pdf-next.js page.html -o out.pdf. Está listo cuando el margen del autor se conserva en el caso de enlace externo y el respaldo @page { margin: 20mm; } sigue aplicándose cuando la página no declara ningún @page.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
Python
Estrellas
95
Forks
57
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de zai-org/zcode-plugins

Todos los issues de zai-org/zcode-plugins

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.