Help us understand the problem. What is going on with this article?

【Rails】wicked pdfの導入方法、ハマったところと対応

導入方法

Gemfile
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'
$ bundle install
$ rails g wicked_pdf
config/initializers/wicked_pdf.rb
WickedPdf.config = {
  :exe_path => "#{Gem.loaded_specs['wkhtmltopdf-binary'].full_gem_path}/bin/wkhtmltopdf"
}

ここで一度サーバーを再起動

pdfs_controller.rb
def bill
  respond_to do |format|
    format.html
    format.pdf do
      render pdf: 'bill',
             layout: 'pdf',
             encording: 'UTF-8',
             template: 'pdfs/bill'
    end
  end
end
views/layouts/pdf.pdf.erb
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <div id="content">
      <%= yield %>
    </div>
  </body>
</html>
views/pdfs/bill.pdf.erb
<p>請求書</p>

<style>
p { font-size: 20px; }
</style>
routes.rb
get 'pdf/bill.pdf', to: 'pdfs#bill'
#get 'pdf/bill'と書いて、`pdf/bill.pdf`にアクセスしても動く

ハマったところと対応

フォントサイズが全部小さい

普段のノリでフォントサイズを指定すると、全部小さく表示されます。
フォントサイズを大きい数値に変更して対応。

本番環境のみ、AssetPilelineのコンパイルエラー

レイアウト内のCSS、JS、mysite.jpg読み込み部分を全て削除。
CSSは全部インラインで記述。(別プロジェクトを作り、Sassで書き、コンパイルしたものをコピペする)

本番環境のみ、日本語が表示されない

本番のサーバーに日本語フォントをインストールして対応

$ yum install -y ipa-gothic-fonts
$ yum install -y ipa-mincho-fonts

その他注意点

  • flexboxが使えない
  • 画像、CSS、JS等のパスの指定方法が特殊
通常 wicked_pdf
cssファイル stylesheet_link_tag wicked_pdf_stylesheet_link_tag
jsファイル javascript_include_tag wicked_pdf_javascript_include_tag
iamgeファイル image_tag wicked_pdf_image_tag

参考

Rails で Wicked PDF 使って PDF を出力してみた ( 日本語もバッチリ )
railsでwicked_pdfの使い方

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした