LoginSignup
12
11

More than 3 years have passed since last update.

Rails で Wicked PDF を使う際に、日本語フォント導入ではまったところ

Last updated at Posted at 2017-12-03

はじめに

この前Railsアプリケーションで初めてPDF化を実装しました。
wicked_pdf と wkhtmltopdf を使ったのですが、日本語フォントの出力にまる2日ほどハマってしまったのでまとめておきます。

基本的な日本語フォントの実装の流れ

自分で調べた際に出てきた、日本語フォントのインストール方法をいくつかあげときます。

gem を使う

下記コマンドで、日本語フォントをインストールする

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

ダウンロードしてくる

IPAexのサイトからフォントファイルをダウンロードし、
.ttfのファイルをapp/assets/fonts内に持ってくる。

vendor/fontsや新しく追加したfontファイル等でなく、assets/fonts内に持ってくれば、

config/initializer/assets.rb
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

みたいな設定をする必要はないです!

ハマった点...

基本上記のようにIPAフォントを入れれば、PDF内でも日本語フォントとして動くはずなのですが...
実際にPDFを出力してみると、文字化けが治らないor真っ白になる、という状況に陥ってしまいました。

エラーの原因

実は今回PDF出力用に新たに追加した、views/layouts/pdf.html.erbのなかで、

views/layouts/pdf.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Wicked PDF</title>
    <%= csrf_meta_tags %>
    <%= wicked_pdf_stylesheet_link_tag    'application', 'data-turbolinks-track': 'reload' %>
    <%= wicked_pdf_javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>

    <%= yield %>

  </body>
</html>

と記述しておりました。問題はこの四行目の<%= csrf_meta_tags %>の記述!
実はここ、views/layouts/application.html.erbのところからコピペしてしまっていたのですが、
ここでうまく UTF-8の設定ができずに、何をしてもフォントを読み込めていませんでした。
ですので、正確には

views/layouts/pdf.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Wicked PDF</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <%= wicked_pdf_stylesheet_link_tag    'application', 'data-turbolinks-track': 'reload' %>
    <%= wicked_pdf_javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>

    <%= yield %>

  </body>
</html>

このように<meta/>タグ内でしっかりと定義する必要があります。
これでうまく日本語フォントで、PDFの出力をすることができました!

参照元

https://qiita.com/metheglin/items/bb88aa25eae250bfa2a2
https://qiita.com/ma2ge/items/90a7d4511954b5fec2c7

12
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
11