ホームページ > 記事 > ウェブフロントエンド > jQueryはHTMLページの指定された領域を印刷し、自動的にページ分割します_jquery
jQueryはHTMLページの指定された領域を印刷し、自動的にページ分割します_jquery
- WBOYオリジナル
- 2016-05-16 16:42:281507ブラウズ
最近のプロジェクトでは、HTML ページを印刷する必要があります。jquery.PrintArea.js プラグインを使用する必要があります。
使用法:
$("div#printmain").printArea();
ただし、DIV の背後にあるコンテンツは引き続き印刷されます。CSS を使用してページングの印刷を制御できます。
<div style="page-break-after: always;"></div>
CSS を使用してページングを制御している場合でも、ページが継続的に印刷されることがあります。ここでは、PrintArea プラグインの属性パラメーターを使用できます。
PrintArea 部分ソース コード:
var modes = { iframe : "iframe", popup : "popup" };
var defaults = { mode : modes.iframe,
popHt : 800,
popWd : 800,
popX : 200,
popY : 200,
popTitle : '',
popClose : false ,
twoDiv : '', //自已扩展的属性，为满足变态需求
pageTitle: ''};//自已扩展的属性，为满足变态需求
プラグインで定義されている属性形式は JSON であることがわかります。以下にいくつかの属性を紹介します。
modes は 2 つの属性を定義します。popup が指定されると、印刷プレビュー ページと見なされる新しいウィンドウが開きます。デフォルトは iframe です。
@popClose | [boolean] | (false),true 印刷完了後にプレビュー ページを開くかどうかを指定します。デフォルトは false (閉じません)。
$("div#printmain").printArea({mode:"popup",popClose:true});
このようにしてDIV印刷を指定することができます。
追加した 2 つの新しい属性の目的について話しましょう
twoDiv:
印刷する必要がある 2 番目の DIV は、当然 2 ページ目になります。このページは比較的長く、自動ページングが必要です。ここで印刷する場合、テーブル内の各行は異なる場合があります。 2枚の紙に。
ページタイトル:
2 番目の DIV は複数のページに分割されており、各ページのヘッダーは同じである必要があります。このパラメーターは共通ヘッダーです。
これら 2 つのパラメータは、次のようなページ内の DIV に対応します。
<div id="pageTitle" style="display: none;">
ページが定義されたら、プラグインでページがどのように処理されるかを見てみましょう。
writeDoc.open(); writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 writeDoc.close(); printWindow.focus(); printWindow.print();
以下は HTML を生成するコードです
html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";
相互意味メソッドはプラグインで定義されているため、ここには貼り付けません。
これが私の考えです:
DIV 内のコンテンツを複数のページに分割し、1 行が複数のページにまたがらないようにする必要がある場合は、HTML コードの生成に熱心に取り組む必要があります。
まず、DIV 内のすべての行を検索します。これらの行を追加した後、共通テーブル ヘッダーの高さが 1 ページに達すると、ページングが必要になります。ここでは、ページ内の最後の行が複数のページにまたがっているため、この行を保存します。下がって次のページに置いてください。
各ページが生成された後、プリンターが従順にページネーションを行うように、HTML タグの後に CSS ページネーション タグを追加する必要があります。
説明すると、生成されるプレビュー ページは HTML ページであり、対応するヘッダーと DTD 情報が含まれます。
プレビューには 4 ページしかないことを知っている人もいるかもしれませんが、印刷時には必ずもう 1 ページあります。この場合、生成したページのページネーション マークが HTML タグの前にあるかどうかを確認する必要があります。 。
facet タグは HTML タグの後になければなりません。これにより、もう 1 ページ印刷するという問題が解決されます。
追記:
変更した JS プラグインを以下にアップロードします。私のプロジェクト サイクルにより、この印刷の問題を解決するためだけに、コードの多くの部分が無駄に書かれています。コードは非常に汚いので、よく見ていただければ幸いです
同僚たちはまた、誰かがそれを最適化し、普遍的なものにしてくれることを望んでいます。