PDF出力時、表示している内容に合わせてheightを指定したい

お世話になっております。

現在の状況は下記です。

赤矢印の部分について改ページせずに１つのページで表示したいです。

想定している改善策としては以下の２点を想定しています。

・縦幅を動的に設定する
・表示しているタグの中で改ページしないように設定する

今まで対応した手順は以下です。

(1)@pageのsizeを以下に設定する。

HTML
1@page {
2    size: 80mm auto;
3    margin: 0mm;
4}

期待：参照元のレコードを見て、縦方向に動的なサイズ
結果：反映されない、A4ほどのサイズで表示される

(2)page-break-系を使用する

HTML
1.page-break {
2    display:block;
3    /* 以下のいずれかを設定 */
4    /* page-break-after: avoid; */
5    /* page-break-before: avoid; */
6    /* page-break-inside: avoid; */
7}
8
9<div class="page-break">
10    /* 対象の動的なテーブル */
11</div>

期待：対象のテーブル内で改ページしない
結果：反映されない

ご確認お願い致します。

HTML
1<apex:page showheader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" renderas="pdf">
2    <html>
3        <head>
4            <style type="text/css">
5                /** ページのサイズ・領域 */
6                @page {
7                    size: 80mm;
8                    margin: 10px;
9                }
10
11                body {
12                    font-family: "Arial Unicode MS";
13                    font-size: 10px;
14                }
15
16                table {
17                    width: 100%;
18                    table-layout: fixed;
19                }
20
21                .page-break {
22                    display:block;
23                    /* メモ：改ページ制御できない */
24                    /* page-break-after: avoid; */
25                    /* page-break-before: avoid; */
26                    /* page-break-inside: avoid; */
27                }
28            </style>
29        </head>
30        <body>
31            <div class="page-break">
32                <table border="1">
33                    <tbody>
34                        <!-- <apex:repeat>を使用した動的なテーブル -->
35                    </tbody>
36                </table>
37            </div>
38        </body>
39    </html>
40</apex:page>

yambejp

2020/12/16 04:21

そもそもpdf出力は何を利用する前提でしょうか？

ryohei0704

2020/12/16 04:27

返信ありがとうございます。今回Salesforceを使用しているのですが、取得したレコード（動的）を一覧で表示するPDFを作成しています。

Lhankor_Mhy

2020/12/16 05:57

どのようにしてPDFに出力しているのですか？

ryohei0704

2020/12/16 06:06 編集

Lhankor_Mhyさん返信ありがとうございます。今回Salesforceを使用しているのですが、以下のように出力しています。コメントだとインデントが無効化されるので追記します。

Lhankor_Mhy

2020/12/16 06:25

「heightを指定したい」とのことですが、これはテーブルについてですか？

ryohei0704

2020/12/16 06:51

Lhankor_Mhyさんテーブルではなく、PDFに設定したいです。印刷画面設定時の@pageのsizeの部分を動的にしたいと考えています。 @page { size: 80mm ????mm; margin: 10px; } ※????mmの部分です。もしくはテーブルの途中で改ページしない方法でもOKです。

Lhankor_Mhy

2020/12/16 06:53

つまり、出力されるPDFのサイズを変えたいということですか？　すごい長いPDFを作る、とかそういうイメージですか？

ryohei0704

2020/12/16 06:58

Lhankor_Mhyさんつまり、出力されるPDFのサイズを変えたいということですか？ →はい。すごい長いPDFを作る、とかそういうイメージですか？ →出力するデータが大量であれば長くなります。データが１０件の場合、PDFのsizeの縦幅を100mm データが１０0件の場合、PDFのsizeの縦幅を1000mm のようなイメージです。

ryohei0704

2020/12/16 06:59

書いてて思いましたが、CSSではなく、JSっぽそうですね。

Lhankor_Mhy

2020/12/16 07:07

JSは効かないようなことがドキュメントに書いてありましたが…… >Visualforce ページを PDF として表示する機能は、印刷用にデザインされ、最適化されたページのためのものです。印刷用の書式設定が容易ではないか、入力やボタンなどのフォーム要素が含まれる標準コンポーネント、および書式設定に JavaScript が必要なコンポーネントは使用しないでください。 https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_page.htm

ryohei0704

2020/12/16 07:15 編集

Lhankor_Mhyさんげっ・・・本当ですね。ちょっと確認次第、またご連絡します。ありがとうございました。