【Rails6】HTMLページをPDF化したい

前提・実現したいこと

Rails6（on Alpine Linux、Docker）で htmlページをpdf化しようとしています。
ツールはwkhtmltopdfのラッパーgemであるwicked_pdfです。
ページそのものは問題ないのですが、pdf化するとWebフォントの読み込みなどCSSが適用されてない様子です。
対処法を教えてください。

rails
1<%= wicked_pdf_stylesheet_pack_tag "application" %>
2<%= wicked_pdf_javascript_pack_tag "application" %>

でwicked_pdf用のJavascriptとCSSを読むはず（？）ですが、webpackerの理解が浅くそもそもどこのディレクトリに配置すればよいのかがわかりません。（多分この無知が原因？）
htmlのJavascriptとCSSはapp/javascript/packsとapp/javascript/stylesheets/下のファイルをロードできているので、レイアウトには問題ありません。

発生している問題・エラーメッセージ

このページをPDF化しようとしてます。問題なくCSSが適用されています。

結果はこうなってしまいます

コンソールでエラーもありません

Started GET "/?format=pdf" for 172.17.0.1 at 2019-12-06 02:18:46 +0000
Cannot render console from 172.17.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by HomeController#index as PDF
  Rendering home/index.pdf.erb within layouts/pdf.html
  Rendered home/index.pdf.erb within layouts/pdf.html (Duration: 0.1ms | Allocations: 5)
[Webpacker] Everything's up-to-date. Nothing to do
[Webpacker] Everything's up-to-date. Nothing to do
[wicked_pdf]: ["/usr/local/bundle/bin/wkhtmltopdf", "--encoding", "UTF-8", "--page-size", "A4", "file:////tmp/wicked_pdf20191206-3370-po4li.html", "/tmp/wicked_pdf_generated_file20191206-3370-1p7jnv4.pdf"]
  Rendering text template
  Rendered text template (Duration: 0.2ms | Allocations: 1)
Sent data index.pdf (55.4ms)
Completed 200 OK in 1934ms (Views: 8.6ms | ActiveRecord: 0.0ms | Allocations: 9979)

該当のソースコード

app/views/layouts/pdf.html.erb

ruby
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">  
5    <title>PDF Sample</title>
6    <link href="/application.css" type="text/css" rel="stylesheet">
7    <%= wicked_pdf_stylesheet_pack_tag "application" %>
8    <%= wicked_pdf_javascript_pack_tag "application" %>
9    <%= stylesheet_pack_tag 'application' %>
10    <%= javascript_pack_tag 'application' %>
11  </head>
12
13  <body>
14
15  <%= yield %>
16
17  </body>
18</html>

うまく適用できないので、後記のapplication.scssをpublic/application.cssとして直接読み込んで試してます（効果なし）

app/views/home/index.pdf.erb

html
1<h1>Home#index</h1>
2<p>Find me in app/views/home/index.pdf.erb</p>
3
4<p class="rounded">寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</p>
5<p class="sans">寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</p>
6<p class="serif">寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</p>
7
8<H1>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H1>
9<H2>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H2>
10<H3>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H3>
11<H4>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H4>
12<H5>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H5>
13<H6>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H6>
14
15<h1>The quick brown fox jumps over the lazy dog. 1234567890</h1>
16<h2>The quick brown fox jumps over the lazy dog. 1234567890</h2>
17<h3>The quick brown fox jumps over the lazy dog. 1234567890</h3>
18<h4>The quick brown fox jumps over the lazy dog. 1234567890</h4>
19<h5>The quick brown fox jumps over the lazy dog. 1234567890</h5>
20<h6>The quick brown fox jumps over the lazy dog. 1234567890</h6>
21
22<h1>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h1>
23<h2>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h2>
24<h3>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h3>
25<h4>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h4>
26<h5>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h5>
27<h6>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h6>

app/javascript/stylesheets/application.scss

css
1@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:500|Noto+Sans+JP:500|Noto+Serif+JP:500&display=swap&subset=japanese'); //フォント指定
2
3@page {
4  size: A4;
5  margin: 0;
6}
7@media all {
8  html, body {
9    font-family: 'Noto Sans JP', sans-serif;
10    padding: 10mm;
11    width: 210mm;
12    height: 297mm;
13  }
14}
15html {  font-size:100%;}
16h1 {  border-bottom: 4px solid #FF6600;}
17.rounded {  font-family: 'M PLUS Rounded 1c', sans-serif;}
18.sans {  font-family: 'Noto Sans JP', sans-serif;}
19.serif {  font-family: 'Noto Serif JP', serif;}

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
    respond_to do |format|
      format.html { redirect_to root_path(format: :pdf, debug: 1) }
      format.pdf do
        render pdf: "index",
          encoding: "UTF-8",
          layout: "pdf.html",
          show_as_html: params[:debug].present?,
          page_size: "A4"
      end
    end
  end
end

試したこと

以下のhtmlファイルを作り、直接wkhtmltopdfコマンドでpdf化した場合は、問題ありませんでした。なので、wkhtmltopdfには問題なさそうです。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5    <title>Sample</title>
6    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap&subset=japanese" rel="stylesheet">
7    <style type="text/css">
8      body { padding: 0 20px 0 20px; font-family: 'Noto Sans JP', sans-serif; }
9      @page { size: A4; margin: 0; }
10      @media all { html, body { width: 210mm; height: 297mm; } }
11      h1 { border-bottom: 4px solid #FF6600; }
12    </style>
13  </head>
14  <body>
15    <p class="rounded">寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</p>
16    <p class="sans">寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</p>
17    <p class="serif">寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</p>
18
19    <H1>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H1>
20    <H2>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H2>
21    <H3>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H3>
22    <H4>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H4>
23    <H5>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H5>
24    <H6>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 1234567890</H6>
25
26    <h1>The quick brown fox jumps over the lazy dog. 1234567890</h1>
27    <h2>The quick brown fox jumps over the lazy dog. 1234567890</h2>
28    <h3>The quick brown fox jumps over the lazy dog. 1234567890</h3>
29    <h4>The quick brown fox jumps over the lazy dog. 1234567890</h4>
30    <h5>The quick brown fox jumps over the lazy dog. 1234567890</h5>
31    <h6>The quick brown fox jumps over the lazy dog. 1234567890</h6>
32
33    <h1>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h1>
34    <h2>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h2>
35    <h3>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h3>
36    <h4>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h4>
37    <h5>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h5>
38    <h6>寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末</h6>
39  </body>
40</html>

補足情報（FW/ツールのバージョンなど）

PDF を出力できる Rails アプリを作成して Heroku で動かすこちらを参考に作りました（ほぼ丸写しで、Rails6とプラットホームの違いによる差くらいです）
Ruby on Rails 6.0.1
Ruby 2.6.5
wicked_pdf 1.4.0
wkhtmltopdf-binary-edge-alpine 0.12.5.0
wkhtmltopdf 0.12.5
Alpine Linux 3.10.3

行動規範の内容に同意します

回答1件

ベストアンサー

wicked_pdf でWebフォントを呼び出すには、
一旦 @font-face で定義してから呼び出す必要があります。

具体的な手法を調べていたら、ばっちりちょうどいい参考例があったのでどうぞ。様々なケースのHowToも含んだ解説なので、より分かりやすいと思います。↓
https://qiita.com/tanakaworld/items/18ec7ff7c7a9fadcf0ae

投稿2019/12/06 05:16

編集2019/12/06 09:06

iss

総合スコア506

NCC1701

2019/12/06 11:16

@font-faceで定義したら、もとのHTMLページもWebフォントが適用されませんでした（もちろんPDFにも）。ローカルにフォントをダウンロードしていないせいでしょうか？（そんなはずはないと思っているのですが） application.scssとpdf.html.erbは以下の通りに変更しました。 $ cat app/javascript/stylesheets/application.scss @font-face font-family: 'Noto Sans JP' font-style: normal font-weight: 400 src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype') @import fonts @page { size: A4; margin: 0; } @media all { html, body { font-family: 'Noto Sans JP'; padding: 10mm; width: 210mm; height: 297mm; } } html { font-size:100%; } h1 { border-bottom: 4px solid #FF6600; } .rounded { font-family: 'M PLUS Rounded 1c'; } .sans { font-family: 'Noto Sans JP'; } .serif { font-family: 'Noto Serif JP'; } $ cat app/views/layouts/pdf.html.erb <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PDF Sample</title> <%= wicked_pdf_stylesheet_pack_tag "application" %> <%= wicked_pdf_javascript_pack_tag "application" %> <%= stylesheet_pack_tag 'application' %> <%= javascript_pack_tag 'application' %> </head> <body> <%= yield %> </body> </html>

NCC1701

2019/12/07 12:22 編集

@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; src: local("Noto Sans CJK JP"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype'); } //@import fonts としたら、Webフォントが適用されました（参考にしたのが.sass.erbのファイルで自分のが.scssファイルの違いでした）しかし、依然PDF化するとCSS（多分JavaScriptも）が適用されません

NCC1701

2019/12/09 13:20

wicked_pdfとwebpacker(rails6)の組合せは断念しました。仕組みがわかったので、自分でコード書くことのにしました（その代わり汎用性なし）

行動規範の内容に同意します