Javascript 使用casperjs从Slideify（HTML5）幻灯片生成pdf时缺少图像 概述

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

他提供的一行代码非常有效，只是我在pdf文档中看不到图像

然而，在上面给出的链接到jtleek存储库（可用）的示例中，图像似乎成功地包含在生成的PDF中

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

复制问题 该问题可以复制如下：

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

[注意：为了使示例正常工作，您必须安装casperjs和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文档不包含任何由index.html呈现的图像

背景 我要指出，整个过程有几个步骤：

使用R/slideify/knitR转换

• .Rmd文件->.md文件
• .md文件->.html文件

使用casperjs转换

• .html文件->.pdf文件

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

使用pandoc生成beamer pdf:

pandoc index.md-t beamer-o index_beamer.pdf

• 产量

  ！LaTeX错误：找不到文件“%iflutex.sty”。

使用Chrome浏览器将index.html打印为pdf

• 产生左截断的图像文件，如上面的文章所述

使用pandoc从md文件生成pdf：

• 生成也不包含图像的pdf（非幻灯片样式）

---

非常感谢您的帮助。

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

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

这没有提供任何有用的信息，所以我用base64编码的图像替换了一个image

src

es。这仍然没有显示，所以我知道它一定是Javascript或CSS。实际上，除去

img

标记之外的所有内容都会产生正确的结果。对标题中的标签进行二进制搜索（例如，删除一半，然后查看图像是否显示）将问题缩小到

libraries/frameworks/io2012/css/default.css

。另一个二进制搜索（每次删除一半文件并重新生成PDF）将其缩小到以下两行：

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

在

幻灯片>幻灯片的CSS中（本文件第246-247行）。我可以通过添加

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


幻灯片>幻灯片{
左边距：0；
边际上限：0；
}

最后，我想解决这个问题

由于是自动生成的，您可能希望添加一个中间处理步骤，将此CSS注入
.html
文件，或者——如果您的
default.CSS
预期是静态的，并且不会重新生成——直接从过期的CSS文件中删除这两个
边距
样式

你说得对——谢谢你——这确实创造了一个完美的PDF文档。但是，经过此更改后，HTML就不那么漂亮了；）至少不是在铬上。与…相比。我可能会使用两个不同的index.html文档，一个生成pdf，另一个显示为html。