目標
wicked_pdfを使って投稿内容をPDF出力していきます。
実装
実装の流れは、
1.ダミーデータの用意
2.wicked_pdfを使ってPDF出力
3.スタイル調整
では行こう！！
1.ダミーデータの用意
PDF出力する前にPDF出力するためのデータをscaffoldコマンドとgemのfakerを使って用意していきます。
新しいプロジェクトを作成。
$ rails new pdf-sample
scaffoldコマンドでCRUDを作成。
今回はPostモデルにtitleとcontentカラムを用意していきます。
$ rails g scaffold post title:string content:text
続いてダーミーデータを作るためにGemfileにfakerを追記しインストール。
gem 'faker'
$ bundle install
seedファイルにダミーデータを追加。
10.times do
Post.create(
title: Faker::Lorem.sentence(word_count: 5),
content: Faker::Lorem.sentence(word_count: 10)
)
end
migrateしてseedします。
$ rails db:migrate
$ rails db:seed
サーバーを立ち上げhttp://localhost:3000/postsにアクセスするとこんな感じです。
2.wicked_pdfを使ってPDF出力
Gemfileに以下を追記してインストール。
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'
$ bundle install
続けてターミナルで以下を入力。
$ rails generate wicked_pdf
こちらも入力。
この辺は公式に記載されていることなので説明は特になしです。
Mime::Type.register "application/pdf", :pdf
ここまでできたらposts_controller.rbのindexに以下を追記します。
encoding: 'UTF-8'を入れないとPDF出力した時に日本語が文字化けするので注意。
def index
@posts = Post.all
respond_to do |format|
format.html
format.pdf do
render pdf: "Post_file", #ファイル名は自由
template: "posts/index.html.erb",
encoding: 'UTF-8'
end
end
end
postのviewにPDF出力のためのリンクを追加します。
<%= link_to "PDF", posts_path(format: :pdf) %>
サーバーを再起動させてPDFのリンクを押すとこんな感じで出力されるはずです。
これでPDF出力ができました！
3.スタイル調整
これで完成でもいいんですが、今のままだとPDF出力後の表示に必要のないPDFとNew Post部分のリンクがそのまま出力されてます。
このリンクを消すのとせっかくなのでテーブルのスタイルも当てていきたいと思います！
まずviewsのlayoutsにファイルを作成し、
$ touch app/views/layouts/pdf.html.erb
以下を入力。
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<%= wicked_pdf_stylesheet_link_tag "pdf" -%>
<%= wicked_pdf_javascript_include_tag "number_pages" %>
</head>
<body onload='number_pages'>
<div id="header">
<%= wicked_pdf_image_tag 'mysite.jpg' %>
</div>
<div id="content">
<%= yield %>
</div>
</body>
</html>
これを作ることでPDF出力された時だけのスタイルを調整できます。
リンク部分にクラスをつけていきます。
<p id="notice"><%= notice %></p>
<h1>Posts</h1>
<%= link_to "PDF", posts_path(format: :pdf), class: "link" #追加 %>
<table>
<thead>
<tr>
<th>Title</th>
<th>Content</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @posts.each do |post| %>
<tr>
<td><%= post.title %></td>
<td><%= post.content %></td>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Post', new_post_path, class: "link" #追加 %>
続いてCSSを当てていきます。
まずapplication.cssを削除してapplication.scssを作成し各scssファイルimportします。
$ rm app/assets/stylesheets/application.css
$ touch app/assets/stylesheets/application.scss
@import 'scaffolds';
@import 'post';
次にPDFのスタイルを当てるためのscssファイルを作成しスタイルを当てていきます。
ちなみにpdf.scssPDF出力時のスタイルなのでapplication.scssにimportする必要はないです。
$ touch app/assets/stylesheets/pdf.scss
.link {
display: none;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
追加したファイルをControllerで読み込ませます。
以下を追記。
def index
@posts = Post.all
respond_to do |format|
format.html
format.pdf do
render pdf: "file_name",
template: 'posts/index.html.erb',
encoding: 'UTF-8',
layout: 'pdf' #追加
end
end
end
ここまでできたらサーバーを再起動してPDF出力してみると
必要のないリンクが消えテーブルにスタイルが当てられています。
これでOK！
最後に共通の設定部分を切り出してまとめておきます。
以下の2行を削除して
def index
@posts = Post.all
respond_to do |format|
format.html
format.pdf do
render pdf: "file_name",
template: 'posts/index.html.erb'
#-------削除--------
encoding: 'UTF-8',
layout: 'pdf'
#-------------------
end
end
end
config/initializers/'wicked_pdfに貼り付けます。
これをすることで次に別の場所でPDF出力を行う際も以下の設定はいちいちContorllerに書かなくてもよくなります。
WickedPdf.config = {
encoding: 'UTF-8',
layout: 'pdf'
}
これで完成！