垂直幻灯片容器造成页空和打印-pdf模式编号错误
作者: kno10创建于 2026年9月11日更新于 2026年9月11日
□ 说明
在使用"print-pdf"模式将演示文稿导出至PDF时,垂直幻灯片(已取消的段落)会使外容器(QQsection class="垂直"QQ)被作为单个幻灯片处理. 这导致一个空页被插入到PDF中,幻灯片编号也变得与演示模式不一致,包括嵌入式编号模式(如水平.vertical,#3924).
□ 步骤重现
- 创建至少一个垂直幻灯片(包含其他部分的一节)的Revaal.js演示文稿。
- 使用`?print-pdf'查询参数在浏览器中打开演示文稿。
- 观察生成的PDF网页及其编号。
□ 预期行为
只有单个幻灯片(包括垂直堆栈内的幻灯片)才应作为PDF页提供。 外相垂直容器对打印过程应当透明,而幻灯片编号应当与正常演示过程中看到的编号相匹配,保持正确的分级(例如如果第一个幻灯片是垂直堆栈,则内相幻灯片应该是1.1,1.2等,没有主空页1).
□ 实际行为
- 外"
<"类="垂直"">"被".pdf-page" div"所包裹,在PDF中产生一页空白. - 这个容器在序列中被分配一个幻灯片号码。 由于在Revaal.js中的编号可以遵循复杂的模式(如XQ.Y'用于垂直幻灯片),将容器作为幻灯片处理会扰乱整个计数逻辑. 之后的所有页面被转移,而编号不再与演示文稿模式相匹配.
□ 技术分析
在js/controlers/printview.js'中,幻灯片使用SLIDES-SELECTOR'常数收集:
从“./utils/constants.js”中导入{SLIDES SELECTOR};
//.
Const 幻灯片 = 查询全部( 此选项 )。 reveal.getRevealElement (), SLIDES SELECTOR); 互联网档案馆的存檔,存档日期2011-12-21.
由于SLIDES-SELECTOR'的定义是.slips section',它与所有部分的元素相匹配,无论深度如何。 在垂直的幻灯片配置中,母容器及其子匹配这个选择器.
当PrintView ' 逻辑通过这些幻灯片时,它会把儿童搬入自己的.pdf-page'容器。 这使得母 “. 垂直” 部分空出, 但它仍然作为自己的页面存在, 并在编号序列中消耗一个插槽 。
□ 建议修补
`PrintView'控制器应使用一个只瞄准实际幻灯片的筛选器,但不包括容器部分。
最优雅的修饰方式是使用":not ()"伪类来更新选择,只瞄准非垂直容器的幻灯片:
[JavaScript] Const 幻灯片 = 查询全部( 此选项 )。 reveal.getRevealElement (), “. slips 一节: not (. vertical) ” ;
这保证了容器不被算作幻灯片,防止了空页和编号不匹配,确保了在演示文稿和打印模式上一致的点数(包括X.Y模式). 大多数现代浏览器现在都支持‘:不'.
内容来源: hakimel/reveal.js