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

时间:2014-11-28 19:39:58

标签: pdf printing reveal.js

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

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

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

3 个答案:

答案 0 :(得分:2)

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

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

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

  6. 更新

    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

    我的' js / reveal.js' 目前有以下设置:

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

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

    revealjs-slides-html

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

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

    pdfstylesheet-kungfooforreveal js co---outcome

    标题幻灯片显示导航控件以及幻灯片编号' 0' (虽然很小,但它在那里......)。其他幻灯片既不显示导航控件,也不显示幻灯片编号。


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

答案 1 :(得分:1)

嗯,一个丑陋的黑客将是:
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之后,只需启动插件即可。它会打开一个弹出窗口:
enter image description here

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

而且瞧! Let's go


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

答案 2 :(得分:0)

我遇到了同样的问题,我只是通过一些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;因为它们是通过下一张幻灯片延长的,所以它们不应该增加数量。