ChromeライクなPDF書き出しを行いたい

###前提・実現したいこと
同一HTMLをSafariとChromeでPDF書き出しを行ったところ、
出てくるファイルのレイアウトが全く異なっていたので、
理想であるChromeのような出力が可能な
wktohtmlみたいなライブラリを知りたい
もしくは、ソースを見直して、wktohtmlでも求めているChromeようなレイアウトのPDFを書き出したい

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

こんにちは。
私は現在動的に作成されたHTMLを
PDFとして書き出すプログラムを作ろうとしています。

まずは叩き台として、page.cssをも用いた
簡単なテーブルタグの雛形ファイルを作り
ブラウザで出力してみたのですが、
ブラウザによって書き出されるPDFが全く異なっています。
詳しくは添付しますが、Safariだと文字もレイアウトもとても小さく出力され
Chromeではだいたいこのくらいの描画が理想というものが出来上がります。

専門的な話には詳しくないのですが、
SafariはWebKit系、ChromeはChronium系とのことなので、
そのレンダリングエンジンの差がこうさせたのでしょうか？
wktohtmlを使用して書き出したものの、やはり出力されるデータは
Safariから書き出しを行った時と同じく、全てが小さなテーブルができるのみでした。

現状しようがなくAppleScriptにて直接Chromeを叩き、Chromeに開かせたページを保存させていますが、
これは応急処置であり、根源的な解決には至っていないので、
どうか、皆さんのお知恵をお借りしたいと、ここに投稿させていただいた次第です。

どうぞよろしくお願いいたします。

###該当の画像

###該当のソースコード

css
1
2   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css">
3    <style>
4        /* プリント用スタイル */
5        @media print{
6            
7            @page{
8                size: A4 landscape;
9                margin: 0;  /* header remove only Chrome */
10            }
11
12            body {
13                width: 296mm; /* needed for Chrome */
14            }
15
16        }
17
18        /* プレビュー用のスタイル */
19        @media screen {
20            body {
21                background: #eee;
22            }
23            .sheet {
24                background: white; /* 背景を白く */
25                box-shadow: 0 .5mm 2mm rgba(0,0,0,.3); /* ドロップシャドウ */
26                margin: 5mm;
27            }
28        }
29
30
31
32        .sheet {
33            width: 296mm;
34            height: 210mm; /* 1mm余裕をもたせる */
35            /*20mm下げたい*/
36            padding-top: 10mm;
37            page-break-after: always;
38        }
39
40
41        table{
42            font-size:5px;
43            width:261mm;
44            margin-left: 17.5mm;
45            margin-right: 17.5mm;
46
47            border-collapse: collapse;
48        }
49
50        th{
51            font-weight:normal;
52        }
53
54        td{
55            padding:0;
56            height:3.5mm;
57        }
58            
59        /* 列ごとの設定 */
60        .column1{
61            width:43mm;
62        }
63        .column2{
64            width:105mm;
65        }
66        .column3{
67            width:22.5mm;
68        }
69        .column4{
70            width:33mm;
71        }
72        .column5{
73            width:24mm;
74        }
75        .column6{
76            width:33.5mm;
77        }
78
79        .height-wide > td{
80            height:8mm;
81        }
82
83        .height-wide2 > td{
84            height:1cm;
85        }
86
87        /* 全体の設定 */
88
89        .centering{
90            text-align:center;
91        }
92
93        .lefting{
94            text-align:left;
95        }
96
97        .toping{
98            vertical-align: top;
99        }
100
101        .table-header{
102            border:solid 2px;
103        }
104        .table-header > th{
105            border-style:solid;
106        }
107
108        .procedures td:nth-child(1){
109            text-align: center;
110        }
111

html
1<body class="A4 landscape">
2    <article>
3        <section class="sheet">
4            <p style="margin:0; padding:1.5mm;"></p>
5
6            <table border="2">
7                <thead>
8                    <tr class="table-header">
9                        <th class="column1">title-a</th>
10                        <th class="column2">title-a</th>
11                        <th class="column3">title-a</th>
12                        <th class="column4">title-a</th>
13                        <th class="column5">title-a</th>
14                        <th class="column6">title-a</th>
15                    </tr>
16                </thead>
17
18                <tbody>
19                    <tr>
20                        <td class="centering"></td>
21                        <td></td>
22                        <td> </td>
23                        <td> </td>
24                        <td rowspan="34"> </td>
25                        <td rowspan="34"> </td>
26                    </tr>
27                    <tr class="procedures">
28                        <td></td>
29                        <td></td>
30                        <td> </td>
31                        <td></td>
32                    </tr>
33                    <tr class="procedures">
34                        <td></td>
35                        <td></td>
36                        <td> </td>
37                        <td></td>
38                    </tr> /* いか32行ほど同じ */
39                    <tr class="height-wide2">
40                        <td> </td>
41                        <td> </td>
42                        <td> </td>
43                        <td class="toping"><br> </td>
44                    </tr>
45                    <tr class="height-wide2">
46                        <td> </td>
47                        <td> </td>
48                        <td> </td>
49                        <td class="toping"><br> </td>
50                    </tr>
51                </tbody>
52            </table>
53
54        </section>
55    </article>
56</body>

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

回答1件

TCPDFとかのライブラリにHTML丸ごと投げて出力するとかどうでしょう？

投稿2017/04/28 03:31

yuki84web

総合スコア1857

yokatone

2017/05/01 04:16

回答ありがとうございます。しかし、そうすると、2つ目の画像に提示したような文字の小さいPDFが出力されてしまうのです。そもそもこのHTMLをFireFoxで出力した時点で文字のサイズなどを含めたデザインが小さくなっていることから、 Chromeが自動的にCSSの修正を行い、画面への出力を行っていると推察されます。このため、TCPDFで出力した際も、Chromeによるデザインの自動修正がされていない、本来のHTMLをもとにしたPDFが出力されていると考えられます。 Chromeが自動で適応していると思われるスタイルがわかれば、それをHTMLに読み込ませ、 TCPDFなどで出力することで、望む結果を得る方法もあるとは思いますが、いかんせん私の検索力の問題があり、そちらの方法に関しても答えを得るに至りませんでした。もしChrome独自のレンダリングルールに関して何かご存知であれば、教えて頂きたく存じます。