[Rails] wicked_pdfでPDF出力する

# 目標
wicked_pdfを使って投稿内容をPDF出力していきます。

# 実装
実装の流れは、
1.ダミーデータの用意
2.wicked_pdfを使ってPDF出力
3.スタイル調整
では行こう！！

## 1.ダミーデータの用意
PDF出力する前にPDF出力するためのデータをscaffoldコマンドとgemのfakerを使って用意していきます。

新しいプロジェクトを作成。

```ruby:ターミナル 
$　rails new pdf-sample
```

scaffoldコマンドでCRUDを作成。
今回はPostモデルにtitleとcontentカラムを用意していきます。

```ruby:ターミナル 
$　rails g scaffold post title:string content:text
```

続いてダーミーデータを作るためにGemfileにfakerを追記しインストール。

```ruby:Gemfile
gem 'faker'
```

```ruby:ターミナル 
$ bundle install
```
seedファイルにダミーデータを追加。

```ruby:db/seed.rb
10.times do
  Post.create(
    title: Faker::Lorem.sentence(word_count: 5),
    content: Faker::Lorem.sentence(word_count: 10)
  )
end
```
migrateしてseedします。

```ruby:ターミナル 
$　rails db:migrate 
```

```ruby:ターミナル 
$　rails db:seed
```

サーバーを立ち上げ`http://localhost:3000/posts`にアクセスするとこんな感じです。

![スクリーンショット 2021-07-01 14.55.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974719/46a59f80-aab4-ef7a-9071-bac489cbf6ff.png)


## 2.wicked_pdfを使ってPDF出力
Gemfileに以下を追記してインストール。

```ruby:Gemfile
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'
```
```ruby:ターミナル 
$　bundle install
```
続けてターミナルで以下を入力。

```ruby:ターミナル 
$　rails generate wicked_pdf
```

こちらも入力。
この辺は公式に記載されていることなので説明は特になしです。

```ruby:config/initializers/mime_types.rb
Mime::Type.register "application/pdf", :pdf
```

ここまでできたら`posts_controller.rb`のindexに以下を追記します。
`encoding: 'UTF-8'`を入れないとPDF出力した時に日本語が文字化けするので注意。

```ruby:app/controllers/posts_controller.rb
 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出力のためのリンクを追加します。

```ruby:app/views/posts/index.html.erb
<%= link_to "PDF", posts_path(format: :pdf) %>
```

サーバーを再起動させてPDFのリンクを押すとこんな感じで出力されるはずです。

![スクリーンショット 2021-07-01 15.23.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974719/20b134b0-3055-2994-6f0f-8181c4f71421.png)

これでPDF出力ができました！

## 3.スタイル調整

これで完成でもいいんですが、今のままだとPDF出力後の表示に必要のないPDFとNew Post部分のリンクがそのまま出力されてます。
このリンクを消すのとせっかくなのでテーブルのスタイルも当てていきたいと思います！

まず`views`の`layouts`にファイルを作成し、

```ruby:ターミナル
$　touch app/views/layouts/pdf.html.erb
```
以下を入力。

```ruby: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出力された時だけのスタイルを調整できます。

リンク部分にクラスをつけていきます。

```ruby:app/views/posts/index.html.erb
<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します。

```ruby:ターミナル
$　rm app/assets/stylesheets/application.css
```

```ruby:ターミナル 
$　touch app/assets/stylesheets/application.scss
```

```ruby:app/assets/stylesheets/application.scss
@import 'scaffolds';
@import 'post';
```

次にPDFのスタイルを当てるためのscssファイルを作成しスタイルを当てていきます。
ちなみに`pdf.scss`PDF出力時のスタイルなので`application.scss`にimportする必要はないです。

```ruby:ターミナル 
$　touch app/assets/stylesheets/pdf.scss
```

```ruby:app/assets/stylesheets/pdf.scss
.link {
  display: none;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
table {
  width: 100%;
}
```

追加したファイルをControllerで読み込ませます。
以下を追記。

```ruby:app/controllers/posts_controller.rb
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！

![スクリーンショット 2021-07-01 17.02.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974719/206c358a-9cae-b391-be47-5d55dc43a018.png)

最後に共通の設定部分を切り出してまとめておきます。
以下の2行を削除して

```ruby:app/controllers/posts_controller.rb
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に書かなくてもよくなります。


```ruby:config/initializers/'wicked_pdf
WickedPdf.config = {
  encoding: 'UTF-8',
  layout: 'pdf' 
}
```
これで完成！