CSSページング印刷

今回はCSSページング印刷について説明します。CSSページング印刷の注意事項は何ですか?以下は実際のケースです。

長い間記事を書いていませんでしたが、最近従業員の新人研修プロジェクトに取り組んでいました。このシステムには個人情報のバッチ印刷のための機能要件があります。これまで印刷機能に触れたことがなかったので、ネットで調べてみたところ、jquery に印刷機能用の API (PrintArea) があることがわかりました。この API に興味がある場合は、関連する知識を自分で確認できます。ここでは詳しく紹介しません。その際、この API を使って印刷機能を実装することにしたのですが、実際にブラウザの印刷機能を呼び出すことはできましたが、印刷内容は空白で何も情報がありませんでした。次に、オンラインで調べて jquery の公式 Web サイトにアクセスして API を確認しました。そのほとんどは、以前は印刷をサポートしていましたが、今は長い間作業してあきらめたソースコードにコードを追加する必要があります。理解できずに時間が経ってしまいましたが、できるはずだと思いますが、私はあまり得意ではないので、興味のある友達は試してみると、多くのことを得ることができるはずです。この計画がうまくいかない場合は、他の選択肢を模索し続けるしかありません。

この不安な瞬間に、 window.print() メソッドを発見しました。 window メソッドを直接使用して印刷機能を実現できることがわかりました。有頂天になったその時、静かに暗雲が頭上を覆い、私の生活は突然暗転してしまいました。印刷機能は実装できますが、Webページをまとめて印刷するとコンテンツがぎっしり詰まってしまいます。ねえ、この問題が完璧に解決されると思ったとき、人生が常にこんなにも満足のいくものではないと誰が想像したでしょうか。ページング印刷機能の実装については、引き続き検討を進めるほかない。そのとき最初に思いついたのは、ページ分割される最後のコンテナに一定の高さを追加して、A4 用紙の高さを埋めることで、次のコンテンツが自動的に次のページに移動するようにすることでした。想像力は美しいですが、現実は残酷で満足のいくものではありません。その後、同僚に強制ページングを実装するために css print 属性を試してみることができると聞き、ドキュメントの説明を見たとき、私はすでに希望の夜明けを見ました。ドキュメントの指示に従って print 属性を使用してページングを強制しましたが、結果は期待どおりではありませんでした。当時私はすでにとても落ち込んでいて、なぜそれがうまくいかないのか理解できませんでしたが、公式文書には達成できると書かれており、たくさんのことがあったので、それでも諦めたくありませんでした。それを達成する方法についてオンラインで説明されているのに、なぜ達成できなかったのでしょうか?諦めずに、実装できなかった問題を最終的に発見しました。そのときの私の状況は次のようなものでした。出力されるコンテンツは、結合して追加した HTML でした。この時点では、css の print 属性は効果がありません。したがって、将来、CSS の print 属性を使用して強制 ページング機能 を実装したい場合は、印刷されたコンテンツの外部コンテナーが 1 つしかないことを覚えておく必要があります。

CSS の印刷属性は次のとおりです:

ページングの例 (オンラインの例から借用):

<p><input type="button" value="打印" onclick="Print()" /></p>  
<p id="page1">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0"  style="page-break-after:always" >  
        <tr><td>第一页打印内容</td></tr>  
        </table>  
</p>  
<p id="page2">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="content" >  
        <tr><td>第二页打印内容</td></tr>  
        </table>  
</p>  
</body>  
</html>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、ご注意ください。 PHP 中国語 Web サイトの他の関連記事へ!

推奨読書:

CSS3混合モードの使用の詳細な説明

H5 APPリスニングリターンイベント処理

以上がCSSページング印刷の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。