在reveal.js打印输出中显示幻灯片编号

Question

我为基于reveal.js的幻灯片激活了slideNumber，它们很好地显示在HTML视图上。

现在我想在文件中建议的Chrome打印输出中显示它们。

似乎它的所有一个大页面，所以即使页眉和页脚只显示一次所有幻灯片而不是每张幻灯片。有没有办法打印出适用于这类东西的reveal.js幻灯片？

Answer 1

如果您要打印严重依赖CSS的HTML文件，那么创建相同HTML的＆＃39; 打印表示的一般准则就是创建一个合适的CSS用于打印。

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

1. 在您的系统上找到 pdf.css 文件。
2. 在您选择的文本编辑器中打开它。
3. 找到字符串＆＃34; slide-number＆＃34;在文件里面。
4. 确定此字符串出现的上下文：是否已注释掉？它是设置为使用display: none还是类似？
5. 相应地更改slide-number的设置。

---

更新

在 pdf.css 中，第32行后面有以下部分：

/* 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;
}

将其更改为：

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

瞧！

---

更新2

与此同时，我克隆了GitHub的最新消息并对自己进行了测试......

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

我的＆＃39; js / reveal.js＆＃39; 目前有以下设置：

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

幻灯片中出现幻灯片号 DO 。这是一个截图蒙太奇，显示了这一点（跳过标题幻灯片）。幻灯片数量相当小，但确实出现了：



我的＆＃39; css / print / pdf.css＆＃39; 文件具有以下设置：

/* 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标记为不应该打印的元素的行。

但是，在Mac OSX Mavericks 10.9.5上创建PDF（使用Chrome 39.0.2171.71（64位））时，幻灯片编号仅针对第一张幻灯片显示，而不是针对以下幻灯片显示。这是PDF页面的截图蒙太奇（跳过第二张幻灯片）：



标题幻灯片显示导航控件以及幻灯片编号＆＃39; 0＆＃39; （虽然很小，但它在那里......）。其他幻灯片既不显示导航控件，也不显示幻灯片编号。

---

我的reveal.js直接来自当前的GitHub来源（AFAICS是最新的）;拉动时我的远程分支似乎是origin/dev。

Answer 2

嗯，一个丑陋的黑客将是：
1.拍摄顺序截图 2.将每个镜头嵌入pdf文件中 （或3.将其嵌入ppt并将ppt转换为pdf）

除此之外，我无法找到任何可以轻松将其转换为好看的pdf的内容。

---

Elegent Hack

虽然我仍然无法找到一个精确的解决方案，但正如标题所暗示的那样，我确实有一个强大的黑客攻击。

一个名为Grab Them All的火狐插件。

它基本上是一个访问预定义列表中链接的脚本，并截取并保存它们。但由于它只是一个黑客行为，因此需要进行一些（很多）手工工作。

首先，您需要在.txt文件中提供指向所有网页的硬链接，即演示文稿中的幻灯片。我在名为paths.txt的文件中这样做了，这些是我案例中的内容：

file:///C:/absolute_path_to_presentation_folder/presentation.html#/
file:///C:/absolute_path_to_presentation_folder/presentation.html#/1
file:///C:/absolute_path_to_presentation_folder/presentation.html#/2
file:///C:/absolute_path_to_presentation_folder/presentation.html#/2/1
file:///C:/absolute_path_to_presentation_folder/presentation.html#/2/2

第二步也是最后一步：在iNstalling插件并重新启动firefox之后，只需启动插件即可。它会打开一个弹出窗口：

现在，它就像1,2,3一样简单。选择file with URLs，选择destination directory并缩小Max page processing time。

而且瞧！ Let's go

---

所有幻灯片将按顺序下载为png格式。剩下要做的就是将它们放在ppt或pdf格式中。

Answer 3

我遇到了同样的问题，我只是通过一些dom操作解决了它：

基本上我的prezentation包含垂直部分，其中包含幻灯片。所以我可以依靠这个结构并通过简单的添加元素

来实现

<script>
      $(document).ready(function () {
            $('.slides')
                .children().each(
                function (sectionNumber, section) {

                  $(this).children().each(
                      function (slideNumber) {

                        var elem = $("<span></span>", {
                          class: "angular-cz-slide-number",
                          text: sectionNumber + "-" + (slideNumber)
                        });
                       $(this).append(elem);
                      })
                });
          }
      )

</script>

在css中可以这样做：

.reveal .angular-slide-number {
  z-index: 100;
  font-size: 20pt;
  color: white;
  position: absolute;
  right: 0;
  top: 0; }

在pdf中看起来它太靠近边缘，但是当你打印它时（我打印4x4版面）它看起来很好。

基本上都是这样。

我喜欢这个解决方案，因为你可以在这里提供一些高级逻辑。例如，在我们的prezentation中，我们有一些标记为＆＃34;不可打印＆＃34;因为它们是通过下一张幻灯片延长的，所以它们不应该增加数量。