2

概述

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

他提供的单线工作完美，除了我在我的 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 呈现的图像。

背景

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

  1. 使用 R/slidify/knitR 进行转换
    • .Rmd 文件 -> .md 文件
    • .md 文件 -> .html 文件
  2. 使用casperjs进行转换
    • .html 文件 -> .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（不是幻灯片样式）也不包含图像

非常感谢你的协助。

4

1 回答 1

2

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

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

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

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

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

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

最后，我向你的 Github repo 提交了一个 pull request来解决这个问题。

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

解决方案截图

于 2014-03-25T03:03:44.977 回答