ASP.NET Core MVCでのHTML→PDF変換について（見た目をほぼ同じにしたい）

ASP.NET Core MVCで、HTMLからPDFに変換したいです。

以下を参考にして確認したところ、HTMLとPDFのフォントが違ってしまいます。
PDFに埋め込まれるフォントがスタイル（font-family）で指定したフォントと違うようです。

How to export HTML to PDF in ASP.NET Core

尚、ダウンロードできるソースコードから、変更した部分は以下のとおりです。

report.html（font-familyを追加したのみ）

lang
1<!DOCTYPE html>
2<html>
3<head>
4    <style>
5        body {
6            font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;
7        }
8
9        table, th, td {
10            border: 1px solid black;
11        }
12    </style>
13</head>
14<body>
15    <h1>Report</h1>
16    <table>
17        <tr>
18            <th>Month</th>
19            <th>Savings</th>
20        </tr>
21        <tr>
22            <td>January</td>
23            <td>$100</td>
24        </tr>
25        <tr>
26            <td>February</td>
27            <td>$80</td>
28        </tr>
29    </table>
30</body>
31</html>

HomeController

lang
1public class HomeController : Controller
2{
3    [HttpGet]
4    public async Task<IActionResult> Index([FromServices] INodeServices nodeServices)
5    {
6        HttpClient hc = new HttpClient();
7        var htmlContent = await hc.GetStringAsync($"http://{Request.Host}/report.html");
8
9        var result = await nodeServices.InvokeAsync<byte[]>("./pdf", htmlContent);
10
11        return File(result, "application/pdf", "report.pdf");
12    }
13}

他のライブラリ等を使用しても構いませんので、実現する方法はありますでしょうか？
ASP.NET MVC（Coreではない）では、TuesPechkinというライブラリを使用している例がありましたが、動作させられませんでした。
（ASP.NET Core MVC には対応していない？）

#追記

shimiteiさんのアドバイスを参考に、Webフォントで確認してみました。
日本語を使用したい為、'Noto Sans Japanese'を指定してみましたが、うまくいきませんでした。

report.html

lang
1<!DOCTYPE html>
2<html>
3<head>
4    <style>
5        @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
6        body {
7            font-family: 'Noto Sans Japanese', sans-serif;
8            font-size: 100%;
9        }
10
11        table, th, td {
12            border: 1px solid black;
13        }
14    </style>
15</head>
16<body>
17    <h1>Report</h1>
18    <table>
19        <tr>
20            <th>Month</th>
21            <th>Savings</th>
22        </tr>
23        <tr>
24            <td>January</td>
25            <td>$100</td>
26        </tr>
27        <tr>
28            <td>２月</td>
29            <td>80円</td>
30        </tr>
31    </table>
32</body>
33</html>

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

回答1件

ベストアンサー

PDF変換はサーバーサイドで行われています。
PDFのフォントが異なるのは、クライアントサイドのブラウザ表示に使われているものと同じフォントがサーバーに無いためでしょう。

##追記

参考ページではjsreport-core＋jsreport-phantom-pdfを使用してHTMLをPDFに変換しています。
試しに動かしてみると確かにfont-family:"メイリオ"のような指定ではPDFのフォントは変わりません。

公式ドキュメントを見ていくと、
https://jsreport.net/learn/phantom-pdf
フォントを指定するにはWebフォントを使いなさいとありました。
https://jsreport.net/blog/fonts-in-pdf

次のように指定するとPDFにも反映されました。

html
1<head>
2<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
3<style>
4@font-face {
5    font-family: 'MyFont';
6    src: url(https://themes.googleusercontent.com/static/fonts/kaushanscript/v1/qx1LSqts-NtiKcLw4N03IFhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
7}
8body {
9    font-family: MyFont;
10}
11</style>

投稿2017/10/12 07:49

編集2017/10/13 05:32

shimitei

総合スコア801

haru853

2017/10/12 11:47

回答ありがとうございます。自分のPC（Windows 10）のみで確認をおこなっています。 IISまたはnode.jsにフォントのインストールが必要でしょうか？（ウェブで探してみましたが、検索の仕方が悪いのかインストール方法がわかりませんでした）

shimitei

2017/10/13 03:22

jsreport-phantom-pdfでのフォント指定を追記しました。

haru853

2017/10/13 05:18

ありがとうございます。わざわざ試していただいたようで恐縮です。しかしながら、追記したように日本語への変換がうまくいきませんでした。 Webフォントの使い方もよくわかっていない為、指定方法が間違っているかもしれません。

shimitei

2017/10/13 05:33

日本語部分が化けてしまうのは、metaタグを追加するとこちらでは解消しました。

haru853

2017/10/13 05:46

おっしゃるとおりでした。初歩的な事がわかっておらずすみませんでした。また何度もお手間をかけてしまいすみませんでした。ありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.32%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ASP.NET Core MVCでのHTML→PDF変換について（見た目をほぼ同じにしたい）

関連した質問