2015-12-09 6 views
6

私はhtmlからpdfを生成するためにphantomモジュールでnodejsを使用しています。PhantomJS:レンダリングされたpdfで外部CSSが無視されます

まず、htmlテンプレートを読み込んでデータを入力し、pdfとしてレンダリングします。私はブートストラップCSSを使用してページのスタイルを設定したいと思いますが、結果として得られるpdfファイルにはスタイリングが含まれています。ここ

は私のjavascriptのコードです:

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/paper/bootstrap.min.css", rel="stylesheet"> 
     <meta charset="utf-8"> 
    </head> 
    <body> 

     <div class="container"> 
      <h1>Title</h1> 
      <%NAME%> 
     </div> 
    </body> 
</html> 

すべてのマークアップがページにレンダリング、ないスタイリングされています

var phantom = require('phantom'); 

var htmlTemplate; 

fs = require('fs') 
fs.readFile('template.html', 'utf8', function (err,data) { 

    var htmlTemplate = populateTemplate(data, body) 

    phantom.create(function(ph){ 
     ph.createPage(function(page) { 

      page.set("paperSize", { 
      format: "A4", 
      orientation: 'portrait', 
      margin: '1cm' 
      }); 

      page.setContent(htmlTemplate, "", function(){ 
       page.render("../userdata/test.pdf", function(){ 
       console.log("page rendered"); 
       ph.exit(); 
       }); 
      }); 

     }) 
    }); 

}); 

とHTMLテンプレート(simplyfied)は次のようになります。私は頭の中で<style>要素にスタイルをローカルのCSSファイルを使用するか、または含まれている場合でも、結果は同じ

答えて

8
ブートストラップのスタイルの一部が適用されている 場合

ではなく、他の人が、あなたはそれがとの競合だと仮定することができますブートストラップCSSライブラリと印刷。特定のクラス、特になどのグリッドクラスは、印刷されたページに対して常に適切な拡大縮小またはレンダリングを行うとは限りません。正しいグリッドレイアウトを印刷できない場合は、これらのクラスを修正することができます。たとえば:

col-xs-6.に交換してください。

ブートストラップスタイルが適用されていない場合は、の場合、問題の原因はページのコンテンツを読み込み、そのページを.pdfドキュメントに変換する間の可能性があります。私の経験上、PDFレンダリングライブラリをデバッグするのはちょっと難しいですが、プロセスの流れがどこで間違っているのか分かりにくいです。試してみることができるいくつかのことがあります:.render()が、外部リソース(別名ブートストラップ)をロードする前に、.render()に電話している可能性があります。

PhantomでのPDFのレンダリングに関するこのような質問を見てください。解決策は、ページの外部CSSが確実にロードされるようにタイムアウト/遅延を追加することです。

私は追加する必要があります - いくつかの他の理由は、それが外部リソースに読み込みに失敗しPhantom.jsレンダリングされたページを引き起こす可能性がありますがあります。 Phantom.jsが正しく設定されていること、特にlocalToRemoteUrlAccessEnabledキーを確認してください。参考のためにStackOverflowの質問は、以下を参照してください:

+0

おかげで、問題は、ブートストラップCSSのようです。一部のスタイルは印刷されますが、一部は無視されます。 – Zbynek

+0

Bootstrapのどのクラスとスタイルが適用されているかを教えてください。そうすれば、問題を解決する方法がわかります。私はBootstrapが常に印刷に優しいとは知られていないことを知っています。ブートストラップからの印刷に関する関連スレッドは次のとおりです。 http://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page –

+2

グリッドシステムが適用されません。 'と' col-xx-y' – Zbynek

関連する問題