2017-10-24 7 views
1

問題 - wkhtmltopdfには、PDFの表示時にブートストラップスタイルが含まれていません。私は幸運を伴わずにすべてのウェブサイトから数多くの方法を試しました。Rails 5 - wkhtmltopdfにはブートストラップが含まれていません。

システム仕様

  • レール5.1.4
  • ルビー2.4.2p198(2017年9月14日リビジョン59899)[x86_64の-darwin17]ここ

は、スニペットでありますコード:

# Gemfile 
gem 'wicked_pdf' 
gem 'wkhtmltopdf-binary' 
gem 'bootstrap-sass', '~> 3.3.6' 

# app/controllers/forms_controller 
def show 
    @form = Form.find(params[:id]) 
    respond_to do |format| 
    format.html 
    format.pdf do 
     render pdf: "#{@form.id}", 
     template: 'forms/show.html.erb', 
     locals: { f: @f } 
    end 
    end 
end 

# app/views/forms/show.html.erb 
<%= render 'forms/form.html.erb' %> 
+0

'wicked_pdf'文書の' form.html.erb'に 'stylesheet_link_tag'と' wicked_pdf_stylesheet_link_tag'を含めましたか? – jvillian

+0

@jvillian - 私がbootstrap-sass宝石を使用している場合、私のブートストラップスタイルシートはどこにありますか? –

+0

私はブートストラップを含めるためにこれを行います: 'wicked_pdf_stylesheet_link_tag" bootstrap.css "'。それ以上の設定があった場合、私は思い出しません。 – jvillian

答えて

0

form.html.erbはs次のようなものがあります。

<%= stylesheet_link_tag wicked_pdf_asset_base64("form_stylesheet") %> 
<%= wicked_pdf_stylesheet_link_tag "bootstrap.css" %> 
<%= stylesheet_link_tag "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", media: "all" %> 

私はFontawesomeフォントを含むためにそこにラインを含めました。ちょうどそのビットを見ることができました。

@import 'bootstrap-sprockets' 
@import 'bootstrap' 
@import 'some_other_styling' 

NOTES:

  • 私はCSSプリプロセッサとしてsassを使用してい

    次に、あなたのform_stylesheet.sassapp/assets/stylesheetsに配置されるべき)で、あなたのような何かを持っている必要があります。まっすぐなCSSやscssを使用している場合は、必要に応じて変更する必要があります。

  • 'some_other_styling'は、追加のCSSルールを入力できる場所です。何も持っていない場合は、その行を含めないでください。

私のために働くように見えるそのすべて...

ああ、config/initializers/wicked_pdf.rbで、私が持っている:

WickedPdf.config ||= {} 
WickedPdf.config.merge!({ 
    # your extra configurations here 
}) 

def wicked_pdf_asset(*sources) 
    sources.collect { |source| 
    asset = Rails.application.assets.find_asset("#{source}.sass") 

    if asset.nil? 
     #raise "could not find asset for #{source}.css" 
    else 
     "<style type='text/css'>#{asset.body}</style>" 
    end 
    }.join("\n").gsub(/url\(['"](.+)['"]\)(.+)/,%[url("#{wicked_pdf_image_location("\\1")}")\\2]).html_safe 
end 

それは私が物事を整理助け場合、私は覚えていません。

+0

そのソリューションを投稿していただきありがとうございます。しかし、これを読む前に、私はGitリポジトリを見つけ出し、見回して、それを理解しました! https://github.com/eltonsantos/wicked_pdf_example –

+0

すばらしいニュース!投稿した内容に答えがありましたか?そうでなければ、おそらくあなた自身の答えを追加して、将来の読者がgitリポジトリをスクロールしなくてもそれをどのように解決できるかを見ることができます。 – jvillian

+1

あなたは間接的に正しい方向に私を指摘したので、私はGoogleで「よりスマート」な検索方法を知っていました!私は今日少し後で解決策を投稿します:) –

関連する問題