CSS ページング印刷の例コード共有-CSSチュートリアル-php.cn

CSS ページング印刷の例コード共有

小云云

リリース： 2018-01-24 11:05:39

オリジナル

1756 人が閲覧しました

この記事は、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>

ログイン後にコピー

CSS ページング印刷の例 コード共有

CSS ページング印刷の例コード共有