pdf - 在Reveal.js打印输出中显示幻灯片编号

Question

我已经为基于reveal.js的幻灯片激活了slideNumber，它们很好地显示在HTML View 中。

现在，我还要按照文档中的建议，在我用Chrome生成的PDF打印输出中显示它们。

似乎这是一个大页面，所以即使页眉和页脚在所有幻灯片上都只显示一次，而不是在每张幻灯片上。有没有一种方法可以很好地打印出适用于此类情况的reveal.js幻灯片？

Answer 1

如果要打印高度依赖CSS的HTML文件，则创建相同HTML的“优雅”打印表示形式的一般准则是创建合适的CSS进行打印。

在RevealJS中，PDF的生成由css/print/pdf.css文件控制。所以我的建议是这样的:

转到系统上的pdf.css文件。

在您选择的文本编辑器中打开它。

在文件内找到字符串“slide-number”。

确定此字符串出现的上下文:是否已注释掉？是否设置为使用display: none或类似代码？

相应地更改slide-number的设置。

更新

在pdf.css内，第32行后面有以下部分:

/*第2节:删除打印中不需要的所有元素。
这将包括导航，广告，侧边栏等。*/
.nestedarrow，
.reveal .controls，
.reveal .progress，
.reveal .slide-number，
.reveal .playback，
.reveal.overview，
.fork-reveal，
。分享展示，
.state-background {
显示:无!重要；
}

将其更改为:/*第2部分:删除打印中不需要的所有元素。
这将包括导航，广告，侧边栏等。*/
.nestedarrow，
.reveal .controls，
.reveal .progress，
.reveal .playback，
.reveal.overview，
.fork-reveal，
。分享展示，
.state-background {
显示:无!重要；
}

瞧!

更新2

同时，我从GitHub克隆了最新资源并进行了自我测试。

在我看来，Reveal.js的PDF生成涉及一个错误。我已经在GitHub上对此提交了 bug report 。

我的“js/reveal.js”当前具有以下设置:

// Display the page number of the current slide
//slideNumber: false,
slideNumber: true,

因此，幻灯片编号 DO 出现在幻灯片面板中。这是显示此内容的屏幕快照蒙太奇(跳过标题幻灯片)。幻灯片编号很小，但确实显示出来:

我的“css/print/pdf.css”文件具有以下设置:

/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
//.reveal .slide-number,
.reveal .playback,
.reveal .overview,
.fork-reveal,
.share-reveal,
.state-background {
display: none !important;
}

我注释掉了将 .slide-number标记为不应打印的元素的行。

但是，在创建PDF时(在Mac OSX Mavericks 10.9.5上使用Chrome 39.0.2171.71(64位))，幻灯片编号只会出现在第一张幻灯片上，而不会出现在随后的幻灯片上。这是PDF页面的屏幕截图蒙太奇(跳过第二张幻灯片):

标题幻灯片显示了导航控件以及幻灯片编号“0”(虽然很小，但是确实存在)。其他幻灯片都没有显示导航控件，也没有幻灯片编号。

我的reveal.js直接从当前的GitHub源中提取(AFAICS是最新的源)；拉动时，我的远程分支似乎是 origin/dev。