87
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Wicked PDFでハマらないために知っておきたいことをQ&A形式でまとめてみた

Posted at

はじめに

実務(Rails)でPDF化をはじめて行いました。
その時に使ったgemがWicked PDFです。

色々ググってはみるものの、ハマることが多かったので自分用まとめも兼ねてシェアしたいとおもいました。

どうやってPDF化するの?

controller.rb
  def result
   	respond_to do |format|
    format.html do
      render layout: "hogehoge"
    end
    format.pdf do
     render pdf: 'result', encoding: 'utf-8', layout: 'pdf.html', show_as_html: params[:debug].present?
     end
   end
  end

pdf: 'result'のところが.pdf.erbになる感じですね。

改ページしたいんだけど…

PDFだったらページをいい感じのところで区切りたいものですよね。

以下のCSSを追加しましょう

<div class="page-break">content 1</div> <!-- 1ページ目 -->
<div class="page-break">content 2</div> <!-- 2ページ目 -->
<div class="page-break">content 3</div> <!-- 3ページ目 -->
.page-break {
  page-break-after:always;
  &:last-child {
    page-break-after: avoid;
  }
}

とします。最後のページにはpage-breakつけなくてもいいんですが、コピペで間違えてつけちゃった時に悩んでしまいそうだったので。またpage-breakとつけておくと区切り目として分かりやすいので:last-childで別に処理を書いてます。

CSS、JavaScript、imageが上手く表示されない!

  • wicked_pdf_stylesheet_link_tag
  • wicked_pdf_javascript_include_tag
  • wicked_pdf_image_tag

Wicked PDF用のhelperがあるのでそれを使えば解決!

要素検証しながらHTMlでdebugしたい!

URLの最後に ?debug=true をつけましょう!

debug=trueの時にimage表示されないんだけど…

以下のようなhelperを書いておきましょう。

 def pdf_image_tag(*args)
    if params[:debug].present?
      image_tag(*args)
    else
      wicked_pdf_image_tag(*args)
    end
  end

あとは普段通りのimage_tagのように使うだけ!

PDFのデフォルトサイズっていくつ?

A4 = 210mm x 297mm
デフォルトだと1pageあたり使える高さが185mm

background-imageでPDFが表示されないんだけど?

no_bacground: false オプションを追加!

render pdf: "result", no_background: false

これに加えて、絶対パスで指定してあげる必要があるので

background-image: asset-data-url('test.png')

みたいにしてあげれば表示される。

PDFのサイズ変えたいんだけど?

  • page_width
  • page_height

を指定すればいける。 単位をつけないとうまくいかないので注意。

フッターにページ数を表示したいんだけど?

  • '[page]'とすればいける。

デフォルトのマージンっていくつ?変更できるの?

10mm。

margin: {
	top: 5 # 単位はmm
	bottom: 5
}

みたいに指定すればいける。

dpi変更したいんだけど?

オプションで変更可能。スクリーンなら'72'がいい。

PDFのデフォルトの向きを横に変えたい!

orientation: 'Landscape'

と、orientationを指定する。

fontSizeオプション指定したらおかしくなった(´;ω;`)

デフォルトがpxじゃない模様。いつもの感覚で12pxみたいに12って指定すると失敗する。

position: absolute; bottom: 0でフッター作ったのに下いってくれない!おこ!

fotterオプションがあるので、それで指定してあげる必要があります。

htmlでfooter書きたかったら

footer: {
  html: {
    template: "footer.pdf.erb" # views以下のパスを指定する点に注意
  }
}

とすればOKです。

layoutファイルどうするん?

僕はPDF用にpdf.html.erbみたいなのを作りました。

ローカルだと見れるのにstaging, productionだと文字が見れない!(怒)

フォントが入ってない可能性あり。

このあたりこのQiitaを見ると、

ipaexgが必要だと判断。

ルートに.fontsディレクトリ作ってその中に、ipaexg.ttfファイルを追加。

productionで全角記号バグったんだけど(T_T)

gemをwkhtmltopdf-binary-11にすればOK。
wkhtmltopdf-binaryでは全角記号は使えなかった。

debug=trueだと見えるのにPDFだと崩れる。。

結構width指定とかちゃんとしてガチガチにコーディングしないとバグる印象です。

他にもこれしたいんだけど、、オプションないの?

公式のAdvanced Usage with all available optionsにたくさん載っています。
基本的にここに載っていなかったらググるとstackoverflowが出てきてそれを読んで解決というプロセスでした!

終わりに

案外躓くどころが多いWicked PDFですが、慣れれば普段のコーディングみたいにスムーズに出来ると思います。よかったら参考にしてみてください!

87
71
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
87
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?