Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
74
Help us understand the problem. What is going on with this article?
@yutackall

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

More than 5 years have passed since last update.

はじめに

Rails で PDF を出力する方法を調べて実装した時のメモ。

「Rails PDF 出力」とかでググると、ThinReports とか引っかかってくるけど、
別途 テンプレートファイルの作成が、必要でかつ、それを作るための別ツールのインストールが必要など、
導入に手間がかかるなぁとおもったので、もっと手軽な Wicked PDF を使って実装してみた。

Wicked PDF は、HTML を変換して PDF として表示する方式のため、
いつも View を html で作っているやり方に、実装できる。
作成中のデバッグも、ブラウザで html を表示してできるので、かなりお手軽。

準備

Gem インストール

Gemfile に下記を追加して、bundle install する

Gemfile
# pdf export
gem 'wkhtmltopdf-binary'
gem 'wicked_pdf'

PDF 変換コマンドを設定

initializers に wicked_pdf.rb を追加

wicked_pdf.rb
WickedPdf.config = {
  :exe_path => "#{Gem.loaded_specs['wkhtmltopdf-binary'].full_gem_path}/bin/wkhtmltopdf"
}

pdf に変換するコマンドのパスを設定している

サンプルコード

下記のような controller 、view テンプレートを用意。
今回は pdf 出力用のテンプレートファイル pdf.html.haml を作成。
売上の一覧表を出力してみる

その前に、テンプレートファイルのタグの書き方が変わるので記載します。

タグ 標準 Wicked PDF サンプルソース (HAML)
CSS stylesheet_link_tag wicked_pdf_stylesheet_link_tag = wicked_pdf_stylesheet_link_tag 'filepath'
JS javascript_include_tag wicked_pdf_javascript_include_tag = wicked_pdf_javascript_include_tag 'filepath'
IMAGE image_tag wicked_pdf_image_tag = wicked_pdf_image_tag 'filepath'

ただし、html でのデバッグする際は、標準のタグにしておく必要がある。

controller

app/controllers/sales_controller.rb
class SalesController < ApplicationController

  def index
    @sales = Sale.all

    respond_to do |format|
      # .html でアクセスした際は、リダイレクト(show_as_html を true にするため、debug: 1 で)
      format.html { redirect_to :action => 'detail', :format => 'pdf', debug: 1 }
      format.pdf do
        render pdf: 'detail',                        # pdf ファイル名
               encording: 'UTF-8',                   # 日本語を使う場合には指定する
               layout: 'pdf.html',                   # レイアウトファイルの指定
               show_as_html: params[:debug].present? # debug するか?
      end
    end
  end
end

html で debug 可能なように記載
url に .html でアクセスすると、html でデバッグ出来る

view

app/views/layouts/pdf.html.haml
!!!
%html
  %head
    %meta{ 'http-equiv' => 'content', content: 'text/html; charset=utf-8' }
      = wicked_pdf_stylesheet_link_tag '//ajax.googleapis.com/ajax/libs/yui/3/build/cssreset/reset-min.css'
  %body
    = yield

とりあえずのリセット CSS 入り。

app/views/sales/index.pdf.haml
%table
  %tr
    %td sales_amount
    %td sales_tax
    %td sum
  - @sales.each do |sale|
    %tr
      %td ¥ #{number_with_delimiter(sale.sales_amount)}
      %td ¥ #{number_with_delimiter(sale.sales_tax)}
      %td ¥ #{number_with_delimiter(sale.sales_sum)}

@sales のレコード数分、テーブルの行が作成される。

日本語対応

日本語を表示したい場合は、別途日本語フォントをインストールが必要。
※ Linux に日本語が入っていないため

下記コマンドで IPA フォントをインストールできる。

$ yum install -y ipa-gothic-fonts
$ yum install -y ipa-mincho-fonts
74
Help us understand the problem. What is going on with this article?
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
yutackall
店舗スタッフ向けクリエイティブ撮影アプリ - UUULA(https://apps.apple.com/jp/app/uuula/id1473103249)、Instagramマーケティング 効果分析コンソール - UUULA ANALYTICS(https://www.ffb.bz/products/uuula_analytics.html)を作ってる人

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
74
Help us understand the problem. What is going on with this article?