2

概要

Rマークダウンドキュメントからpdfドキュメントを生成しようとしています(ramnathvのslidifyライブラリとio2012フレームワークを使用)。このプロセスについては、ここで簡単に説明します。

彼が提供するワンライナーは、pdf ドキュメントに画像が表示されないことを除いて、完全に機能します。

ただし、jtleek のリポジトリ (ここから入手可能) にリンクしている上記の例では、生成された pdf に画像が正常に含まれているように見えます。

問題が JavaScript にあるのか、slideify/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.html によってレンダリングされる画像が index.pdf ドキュメントに含まれていないことです。

バックグラウンド

完全なプロセスにはいくつかのステップがあることに注意してください。

  1. R/slidify/knitR を使用して変換します
    • .Rmd ファイル -> .md ファイル
    • .md ファイル -> .html ファイル
  2. casperjs を使用して変換する
    • .html ファイル -> .pdf ファイル

私が検討した Rmd から pdf を生成する別の方法は次のとおりです。

  1. pandoc を使用してビーマー 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

これは有用な情報を提供しなかったため、画像srces の 1 つを base64 でエンコードされた画像に置き換えました。これはまだ表示されていないので、Javascript または CSS に違いないことがわかりました。実際、imgタグ以外のすべてを削除すると、正しい結果が得られました。ヘッダー内のタグのバイナリ検索 (たとえば、半分を削除し、画像が表示されるかどうかを確認する) により、問題を に絞り込みましたlibraries/frameworks/io2012/css/default.css。別のバイナリ検索 (ファイルの半分を削除し、毎回 PDF を再生成する) により、次の 2 行に絞り込まれました。

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

CSS for slides > slide(このファイルの 246 ～ 247 行目)。追加することで問題を解決できました

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

最後に、問題を修正するために、Github リポジトリにプル リクエストを送信しました。

これを自動生成しているので、おそらくこの CSS を.htmlファイルに挿入する中間処理ステップを追加するか、default.css静的であると予想され、再生成されない場合marginは、滞納から 2 つのスタイルを削除するだけです。 CSSファイルを直接。

ソリューションのスクリーンショット

于 2014-03-25T03:03:44.977 に答える