HTML帳票の改ページについて

困っていること

現在、このサイト「そろそろ真面目に、HTMLで帳票を描く話をしようか」に記載されている「Paper CSS」の技術を使ってhtmlで帳票を作成しています。
ページの高さが固定でない帳票の改ページの処理でつまづいているので、アドバイスをいただければと思います。

前提

「Paper CSS」では

css
1.sheet{
2 page-break-after: always;
3}

html
1<section class="sheet">
2  <!-- 印刷内容 1枚目 -->
3</section>
4<section class="sheet">
5  <!-- 印刷内容 2枚目 -->
6</section>

という形で改ページを行っています。

やったこと

js
1$a1.height() + $a1.offset().top;

の方法で要素がページの範囲を超えていないかをチェックして、
超えている場合に改ページをするという処理を記述したいと考えました。

要素の高さがページを超えている場合に

html
1</section>
2<section class="sheet">

というコードを要素の直前に挿入できれば解決するかと思っていたのですが、
閉じタグのみを挿入することがうまくできず、他の方法も探しています。

よろしくおねがいします。。

どんな解決法でも構いません。
アドバイスいただけますと幸いです。
よろしくお願いいたします。

x_x

2019/05/24 03:11

page-break-after: always; を適用させたいという意図であれば section にする必要もなく、<div class="sheet"></div> などでもいいと思うのですが、section でなければいけない理由があるのでしょうか？

mosana

2019/05/24 03:24

section を選んでいる理由は、section がA4の用紙そのものとして動作するためです。こだわりは特にありませんので div でも良いのですが、div を使用しても問題は解決しませんでした。

x_x

2019/05/24 03:25

解決しないというのは要素を挿入できないということですか？

mosana

2019/05/24 03:29

はい。閉じタグから開始する以下のコードを挿入ができませんでした。 </div> <div class="sheet">

x_x

2019/05/24 03:52

<div class="sheet"></div>と言ったはずですが、どうしてそうなるのでしょうか？

x_x

2019/05/24 04:01

要素の挿入であってタグではないのですが、区別はついていますか？

mosana

2019/05/24 05:29

要素でなくタグですね。ご回答者さまの<div class="sheet"></div>というのは大元の <section class="sheet"> </section> を <div class="sheet"></div> にするということかと考えましたが、 jsで挿入しようとしている </section> <section class="sheet"> を <div class="sheet"></div> にするということのようですね。要するに <div class="sheet"> <div class="sheet"> </div> </div> このような形にするということでしょうか？

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

回答2件

自己解決

html
1<section class="sheet">
2  <!-- 印刷内容 1枚目 -->
3</section>

のsectionタグを削除。
中身をA4幅に指定した上で、jsで画面上の高さを取得。
A4高さを超えたタイミングで、超えた要素以前のすべての要素と、以降のすべての要素それぞれを、

js
1.wrapAll('<section class="sheet">');

でsectionで囲うことで実現しました。

ご助言いただきありがとうございました。

投稿2019/05/25 03:35

mosana

総合スコア16

</section>

<section class="sheet"> というコードを要素の直前に挿入できれば解決

javascriptで処理したいのでしょうか？
上記方法ではどの箇所が「要素の高さがページを超えている」かわからないのでは？
原則手動でやる

どうしてもjsでやるならsection内にネストしてsectionをつくる
などの対応が必要だとおもいます

投稿2019/05/24 03:06

yambejp

総合スコア117632

mosana

2019/05/24 03:20

帳票の内容は主にテーブルになりますので、trごとに要素の高さを取得しています。取得方法は ```js $a1.height() + $a1.offset().top; ``` で、高さが超えている要素（tr）を検出し、非表示にさせる等であれば問題なく動作します。帳票のサイズを ```css @page { size: A4; margin: 0; } ``` にて固定しており、sectionタグが完全にA4のサイズとなっていますので、sectionタグ内に同様のsectionタグを挿入すると、A4の用紙の中にA4の用紙が重なってしまいました。ちなみに、jsで実装する必然性はありません。