5 jQuery印刷ページオプション

jQuery印刷プラグインを使用すると、Webサイトのどの部分が印刷されているかを制御およびカスタマイズして、ブラウザのデフォルト印刷機能（通常はウィンドウ全体を印刷）に代わるものを提供できます。この記事では、いくつかの人気のあるjQuery印刷プラグインを検討し、この機能を自分で構築する方法を示します。

キーポイント：

• jQuery印刷プラグインを使用すると、Webサイトのどの部分が印刷されているかを制御およびカスタマイズして、ブラウザのデフォルト印刷機能（通常はウィンドウ全体を印刷）に代わるものを提供できます。
• jQuery Print Previewプラグインは、新しいブラウザウィンドウを開き、印刷用のWebサイトの特定の部分を表示します。このプラグインは、情報カードやテーブル内の行などのデータ部品を印刷するのに非常に役立ちます。
• jQuery印刷プラグインは、印刷要件をカスタマイズするためのさまざまな設定を提供します。たとえば、IFrameを介して現在のウィンドウにポップアップするように設定し、プリントディスプレイレンダリングの前に待機時間を設定し、ポップアップの前後にコンテンツを配置できます。
• より高度なソリューションを試してみたい場合は、<iframe></iframe>要素を動的に作成し、ページに追加し、<iframe></iframe>のコンテンツを設定し、<iframe></iframe>on.print()で
を呼び出してから、遅延後に削除します。

jQuery印刷プラグインの概要：

プラグインの印刷は最もエキサイティングなプラグインではないかもしれませんが、知りたいプラグインをいくつか紹介します。また、より高度なソリューションを試してみたい場合は、この機能を自分で構築する方法についても簡単に説明します。

注：

古いブラウザー（IE8を意味します）は、特定のプラグインを使用する場合、異常な動作をする可能性があります。ただし、すべての最新のブラウザは、一貫した方法で印刷プレビューを処理するため、完全な互換性が必要な場合は、これに留意してください。

jQueryプリントプレビュー

この小さなjQueryプラグインを使用すると、新しいブラウザウィンドウを開いて、印刷用のWebサイトの特定の部分を表示できます。このリストにある他のいくつかのプラグインとは異なり、このプラグインは送信ブラウザーの印刷機能にタッチしません。最小限のウィンドウを開くだけです（今すぐ直接印刷できるので、完璧です）。

このプラグインの目的は、情報カードやテーブル内の行など、印刷するデータの一部がある場合です。新しいウィンドウ（プラグインの構成オプションを提供）で開き、そこから印刷できます。これにより、必要なものだけを印刷することが保証されます。

そのブラウザのサポートは非​​常に包括的であり、最新のブラウザでうまく機能しているようです。

残念ながら、それはgithub上にないので、積極的に維持されているかどうかを知ることは困難です。ただし、これはあなたを止めるべきではありません。それがあなたのために機能するかどうかを確認してから、そのまま使用してください。

jQueryプラグイン

醜いデモにだまされないでください。 jQuery Printプラグインはうまく機能し、カスタム印刷のニーズに合わせてさまざまな設定を提供します。たとえば、ポップアップが現在のウィンドウ（IFRAME経由）にあるかどうかを設定し、プリントディスプレイがレンダリングする前に待機時間を設定し、ポップアップの前後にコンテンツを配置できます。

実行を開始するには、jqueryオブジェクトまたはセレクターを渡すだけで、プラグインが残りを行います。

著者は、プラグインを改善するために2016年にいくつかの提出物をリリースしました。多くの提出はありませんが、それは進化しているようです。

jquery printpageプラグイン

このプラグインについて直接お話しましょう。長い間更新されていません。 6年前に最後に更新されたのを見て動揺する人もいますが、他の人（私自身を含む）は、それを正常に動作させる単純なプラグインとして見ることができます。

このプラグインは、メインブラウザー印刷モードのロードの前にロードされるメッセージと画像を備えた小さなモードウィンドウを作成します。アンカーマークを印刷したいものを指すのに使用すると、最適に機能するようです。印刷可能なコンテンツを新しいページに追加してから、このプラグインを使用して印刷できます。ユーザーがJavaScriptを有効にしない場合、正常にリンクし、新しいウィンドウでコンテンツを開きます（通常の印刷ができます）。

jquery printme

このプラグインは非常に基本的です。印刷するjQuery要素でそれを呼び出すだけで、印刷プレビューウィンドウを呼び出します。話すという本当の選択肢はありません。あなたが期待どおりに機能します。

他のプラグインのようなすべてのオプションはありませんが、このプラグインは非常に基本的で、テストブラウザーでうまく機能します。これをお勧めする理由は、そのソースコードを確認し、印刷プレビューの準備に段階的にどのように進むかを確認できるからです。自分でやりたい場合（そして追加の機能と設定を追加します）、実際には開始するのに最適な場所です。

このプラグインがサポートを提供することは期待していません。それを使用して、それが機能するなら、それは素晴らしいことです！そうでない場合は、何か他のものを見つける必要があります（または、以下に概説するように自分で構築することを選択できます）。

jQueryプリントプレビュープラグイン

リストの最後のリストは、jQuery Print Previewプラグインです。訪問者に、印刷されたバージョンのWebサイトのプレビューを提供するように設計されています。従来の印刷プレビューとは異なり、このプラグインにはモードウィンドウにすべてのコンテンツと印刷スタイルが含まれています。

さらに、SitePointの記事で公開されています。これをここで読むことができます：

訪問者が印刷されたら - その印刷stylesheet について。

プラグインには優れたブラウザのサポートがあります（IE6にドラッグされます）が、他の構成は提供されていないようです。また、いくつかの未解決の問題があるため、積極的に維持されなくなったと結論付けることができます。

この機能を自分で構築する方法は？ この機能を作成することはそれほど難しくありません。これらのプラグインが舞台裏で行う作業のほとんどは、

要素を動的に作成し、ページに追加し（ただし、CSSを使用して画面外に配置する）、

のコンテンツを設定し、<iframe></iframe>のコンテンツを呼び出すことです。 <iframe></iframe>で、短い遅延の後に削除します。 <iframe></iframe> .print()これを行う方法は次のとおりです

概要：

function openPrintDialogue(){
  $('<iframe>', {
    name: 'myiframe',
    class: 'printFrame'
  })
  .appendTo('body')
  .contents().find('body')
  .append(`
    <h1 id="Our-Amazing-Offer">Our Amazing Offer</h1>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975900525289.png?x-oss-process=image/resize,p_40"  class="lazy" alt="5 jQuery Print Page Options " /></img>  `);

  window.frames['myiframe'].focus();
  window.frames['myiframe'].print();

  setTimeout(() => { $(".printFrame").remove(); }, 1000);
};

$('button').on('click', openPrintDialogue);

業界はページを印刷しなくなっています（どのくらいの頻度でページを印刷しますか？）。これらのプラグインのいくつかが老化し始めていることは驚くことではありません。

ただし、ページ/ページパーツを印刷することが理にかなっているという極端なケースがいくつかあります。例は、イベント登録/バーコードアイテムの印刷と、領収書確認/購入証明です。

Webサイト/Webアプリケーションを構築して印刷する必要がある場合は、印刷のみのCSSファイルを作成することができます（数分でカスタマイズされた印刷スタイルシートを作成してください）。 。または、上記の方法を使用して、興味のあるもののみを印刷することもできます。どちらのソリューションも正常に機能しますが、この傾向はCSSを使用して印刷プロファイルをセットアップするために変化しているようです。

（FAQの部分は省略されています。コンテンツのこの部分はプラグイン自体とはほとんど関係がなく、長いので、必要に応じて自分で追加できます）

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