ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryはHTMLページの指定された領域を印刷し、自動的にページ分割します_jquery

jQueryはHTMLページの指定された領域を印刷し、自動的にページ分割します_jquery

WBOY
WBOYオリジナル
2016-05-16 16:42:281562ブラウズ

最近のプロジェクトでは、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 プラグインを以下にアップロードします。私のプロジェクト サイクルにより、この印刷の問題を解決するためだけに、コードの多くの部分が無駄に書かれています。コードは非常に汚いので、よく見ていただければ幸いです

同僚たちはまた、誰かがそれを最適化し、普遍的なものにしてくれることを望んでいます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。