Railsでwickedpdfを導入する手順(初心者用)

Rails初心者です。以下の手順で、つまづきながらもPDFの出力まで出来たのでご紹介いたします。初心者の方にも分かりやすいよう、1から手順を紹介いたします。

下記の記事を参考にしました。 tnakamura.hatenablog.com

wickedpdfって何？

HTMLを元にPDFを生成できるライブラリです。

事前準備

プロジェクト作成

rails new sample_app

gemのインストール

今回、Rails初心者向けということで、GemfileはRails チュートリアルで使用している下記を使用しています。

#vim Gemfile

gem 'rails',        '4.2.2'
gem 'sass-rails',   '5.0.2'
gem 'uglifier',     '2.5.3'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.3'
gem 'turbolinks',   '2.3.0'
gem 'jbuilder',     '2.2.3'
gem 'sdoc',         '0.4.0', group: :doc
gem 'therubyracer', platforms: :ruby

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem 'spring',      '1.1.3'
end

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
end

このGemfileにwickedpdf用のgemを追記します。 gem 'therubyracer', platforms: :ruby　の下に続けて記載します。

#Gemfileに追加

gem 'wkhtmltopdf-binary'
gem 'wicked_pdf'

bundle installを実行します。今回はwithout productionをつけています。

bundle install --without production

パッケージをインストール

関連するパッケージをインストールします。

yum install libXext  libXrender  fontconfig  libfontconfig.so.1

日本語フォントのインストール

日本語フォントをインストールしないと、PDFが文字化けしてしまいます。IPAフォントというものを使っています。ライセンスなどは各自ご確認ください。

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

制作

ここからは、下記記事の「コントローラーを作成」以降の手順を行ってください。（本当は詳しく手順を記載しようと思ったのですが、本当にそのままで大丈夫でしたので省略。） tnakamura.hatenablog.com

完成形

上記の「事前準備」「制作」の手順を行うと、wickedpdfで下記のようなPDFが作成されます。

f:id:huuzoo:20160311170148p:plain

あとはPDFのviewを作っていくだけです。

補足：wickedpdfのcssや画像の読み込み

wickedpdfではcssやjavascriptのファイルは下記のように読み込みます。

<%= wicked_pdf_stylesheet_link_tag "wickedpdf/custom.css" %>
<%= wicked_pdf_javascript_include_tag "wickedpdf/custom.js" %>

上記の場合、 app/assets/stylesheets/wickedpdf 配下の custom.css や app/assets/javascripts/wickedpdf 配下の custom.js が読み込まれます。

また、画像は下記のように出力します。

<%= wicked_pdf_image_tag('image.png' %>

この場合、 app/assets/images/ 配下の image.png が読み込まれます。

詳しくは下記をご覧ください。

www.virment.com

以上になります。少しでもwickedpdfを使いたい方の参考になれば幸いです。

それでは素敵なwickedpdfライフを！

ふずブロ

ECショップやサービスを運営する人が日々の徒然を語るブログ。