使用casperjs从slidify（HTML5）幻灯片生成pdf时丢失图像

Question

概述

我正在尝试从R markdown文档生成pdf文档（使用ramnathv的slidify库和io2012框架）。简要介绍了此过程here。

他提供的单行程完美无缺，但我在pdf文档中看不到图像。

但是，在上面给出的链接到jtleek的存储库（可用here）的示例中，看起来图像已成功包含在生成的pdf中。

我不确定问题出在我的javascript上，还是由slidify / R生成的HTML代码。

复制问题

问题可以复制如下：

casperjs makepdf.js http://jburos.github.io/test-slidify-to-pdf/index.html index.pdf 1000

[注意：为了使示例有效，您必须安装casperjs＆amp; phantomjs。 ]

makepdf.js的内容是：

var casper = require('casper').create({viewportSize:{width:1500,height:1000}});
var args = casper.cli.args;
var imgfile = (args[1] || Math.random().toString(36).slice(2))
casper.start(args[0], function() {
  this.wait(args[2], function(){
    this.captureSelector(imgfile, "slides");
  });
});

casper.run();

或者，您可以通过克隆我的git存储库来复制问题，

git clone git@github.com:jburos/test-slidify-to-pdf.git
cd test-slidify-to-pdf
casperjs makepdf.js  index.pdf 1000

同样，问题是index.pdf doc不包含由index.html呈现的任何图像。

背景

我会注意到整个过程有几个步骤：

1. 使用R / slidify / knitR进行转换
   • .Rmd文件 - ＆gt; .md文件
   • .md文件 - ＆gt; .html文件
2. 使用casperjs进行转换
   • .html文件 - ＆gt; .pdf文件

我考虑过从Rmd生成pdf的替代方法包括：

1. 使用pandoc生成beamer pdf：pandoc index.md -t beamer -o index_beamer.pdf
   • 收益! LaTeX Error: File ``ifluatex.sty' not found.
2. 使用Chrome浏览器将index.html打印为pdf
   • 产生左截断的图像文件，如上面的帖子所述
3. 使用pandoc从md文件生成pdf：
   • 产生pdf（非幻灯片样式）也不包含图像

非常感谢您的协助。

Answer 1

感谢您提供详细问题。起初，我认为这个问题是一个参考问题，所以我跑了

casperjs makepdf.js index.html index.pdf 3000 --verbose=true --log-level=info

这没有提供有用的信息，所以我用base64编码的图像替换了一个图像src es。这仍然没有显示，所以我知道它必须是Javascript或CSS。实际上，删除除img标记之外的所有内容都会产生正确的结果。对标题中的标记进行二分搜索（例如，删除一半，并查看图像是否显示）将问题缩小到libraries/frameworks/io2012/css/default.css。另一个二进制搜索（删除一半文件并每次重新生成PDF）将其缩小到这两行：

 margin-left: -450px;
 margin-top: -350px;

在slides > slide的CSS中（此文件的第246-247行）。我能够通过添加

解决问题

<style type="text/css">
 slides > slide {
   margin-left:0;
   margin-top:0;
 }
</style>

最后，我submitted a pull request to your Github repo来解决问题。

由于您是自动生成的，因此您可能希望添加一个中间处理步骤，将此CSS注入.html文件，或者 - 如果您的default.css预计是静态的，并且没有重新生成 - 只需直接从拖欠的CSS文件中删除两个margin样式。