Q&Aこんにちは。
htmlのテーブルをpdfに変換しようとしています。
pdfレイアウトは各pdfページの上にヘッダー（theadのカラム名）を表示し、
その下からカラムの内容を出力したいです。
１ページ カラム１ ｜ カラム２ ｜ カラム３ ｜ カラム４ ｜ カラム５ ｜ 内容１…… ｜ 内容2…… ｜ 内容3…… ｜ 内容4…… ｜ 内容5…… ｜ -> 正常の場合 ２ページ カラム１ ｜ カラム２ ｜ カラム３ ｜ カラム４ ｜ カラム５ ｜ 内容１1… ｜ 内容21… ｜ 内容31… ｜ 内容41… ｜ 内容51… ｜ -> 内容１の文字数が長い場合：ヘッダー名と内容が重なる ２ページ カラム１内容１… ｜ カラム２ ｜ カラム３ ｜ カラム４ ｜ カラム５ ｜ 内容１1… ｜ ｜ ｜ ｜ ｜
中身が１ページ内で表示できる長さでは問題ありませんが、
中身が１ページを超える長さだと次のページのヘッダーと重なるバグがあります。
私はwkhtmltopdfを使っていますが、他の変換ツールでも似てる処理をしているみたく、
スタイル指定で解決できそうです。
参考先：
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2367
css
1thead { display: table-header-group; } 2tfoot { display: table-row-group; } 3tr { page-break-inside: avoid; }
ですが、
上記のコードを入れても、効かないです。
何が問題でしょうか。
次は変換元のhtmlのコードです。
コードは殆どそのままで、
smartyのforeach文のみ→サンプル文字列に変えました。
html
1<!DOCTYPE html> 2<head> 3<style> 4body { 5 margin-left: 10px; 6} 7thead { 8 display: table-header-group; 9} 10tfoot { 11 display: table-row-group; 12} 13 14table { 15 border-collapse: collapse; 16} 17td, th { 18 border: 1px solid #000; 19} 20tr { 21 page-break-inside: avoid; 22} 23.area { 24 width: 12%; 25 word-wrap: break-word; 26 font-size: 10px; 27 text-align: left; 28 vertical-align: top; 29} 30</style> 31</head> 32<body> 33<table style="width: 98%; table-layout: fixed;"> 34 <thead> 35 <tr> 36 <td class="area" >カラム１</td> 37 <td class="area" >カラム２</td> 38 <td class="area" >カラム３</td> 39 <td class="area" >カラム４</td> 40 <td class="area" >カラム５</td> 41 </tr> 42 </thead> 43 <tbody> 44 <tr> 45 <td class="area" >長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列……………10000文字</td> 46 <td class="area" >長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列……………20000文字</td> 47 <td class="area" >長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列……………30000文字</td> 48 <td class="area" >長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列……………40000文字</td> 49 <td class="area" >長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列長い文字列……………50000文字</td> 50 </tr> 51 </tbody> 52</table> 53</body> 54</html>
何でもヒントになりますので、是非一言おかけください。
よろしくお願いいたします～
回答1件
0
自己解決
tr { page-break-inside: avoid; }が効かない原因が分かりました。
html
1<tr> 2 <td>長い文字列長い文字列長い文字列長い文字列長い文字列…</td> 3</tr>
tr { page-break-inside: avoid; }は
td単位で効くらしく、これを解決するには構造を変えて
コントローラー側で文字数をチェックしtdを分ける必要がありそうです。
詳しい対応方法はまだやってませんので、実装したら更新いたします。
投稿2015/10/16 08:53
総合スコア33
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。