web-dev-qa-db-ja.com

印刷イベントでJavaScriptをトリガーする方法

ユーザーがページを印刷するときにJavaScriptイベントをトリガーすることはできますか？ライブラリは画面ではあるが印刷ではないので、ユーザーがページを印刷することを選択した場合、JavaScriptライブラリへの依存を削除したいと思います。

これを達成する方法はありますか？

javascriptbrowserprinting
27
Joe

グーグルからのこの答えに出くわした人のために、私が物事を片付けようとしましょう：

Ajayが指摘したように、印刷のために発生する2つのイベントがありますが、それらは十分にサポートされていません。私が読んだ限りでは、これらはInternet ExplorerおよびFirefox（6+）ブラウザーでのみサポートされています。これらのイベントはwindow.onbeforeprintとwindow.onafterprintで、（予想通り）印刷ジョブの前後に発生します。

ただし、Joeのリンク（ https://stackoverflow.com/a/9920784/578667 ）で指摘されているように、すべての場合にそれが実装される方法は正確ではありません。ほとんどの場合、ダイアログの前に両方のイベントが発生します。また、印刷ダイアログの実行中にスクリプトの実行が停止する場合があるため、両方のイベントが同時に発生する可能性があります（ダイアログが完了した後）。

これら2つのイベントの詳細（およびブラウザーのサポート）については、以下を参照してください。

https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint

https://developer.mozilla.org/en-US/docs/DOM/window.onafterprint

短い答え：印刷フローを妨害したい場合は、そうしないでください。印刷後にコードをトリガーしたい場合は、意図したとおりに機能しません。貧弱なブラウザのサポートを期待し、優雅に低下するようにしてください。

31
Aejay

これは、たとえば_window.onbeforeprint_を上書きすることで実行できます。

Chromeを使用して、より難解なwindow.matchMedia("print").addListener(function() {alert("Print Dialog open.")})も機能することを発見しました。

この議論の余地のある機能は、ユーザーがページを印刷するのを阻止するために使用できます。

Scribd で初めて遭遇しました。そこで、メニューコマンドを使用して印刷ダイアログを開くと、ページのコンテンツがグレー表示され、ページを印刷できない理由を説明する警告のポップオーバーメッセージが表示されます。 （完全な分析のための注意：そのページでは、control-pもオーバーライドされているため、印刷ダイアログを開くためにまったく使用できません。さらに、コンテンツを非表示にするプリンター出力用の@media CSSがあります。すべてFirefoxでテストされています）。

13
Daniel K.

印刷ダイアログが表示される前、またはドキュメントがプリンターキューに送信された直後に何かしたい場合は、以下のイベントを使用できます。window.onafterprint、window.onbeforeprint

0
Ajay Beniwal

Bootstrapを使用してここでオプションを探している人のために、私は次のコードを使用してこれを達成しました印刷ボタンがクリックされたとき。これしない CTRL + Pを押しても機能する。

$("#print_page").click(function(){
$("#print_section").addClass('visible-print-block');
window.print();
$("#print_section").removeClass('visible-print-block');})

印刷したくないものにhidden-printを追加してから、印刷したいビットにprint_sectionのID（または複数のセクションがある場合はクラス）を追加する必要があります！少しハッキーですが、うまくいきます！

0
Ed Wade