Posted at

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

More than 3 years have passed since last update.


はじめに

実務(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ですが、慣れれば普段のコーディングみたいにスムーズに出来ると思います。よかったら参考にしてみてください!