web-dev-qa-db-ja.com

Google Chromeの印刷プレビューの[印刷/キャンセル]ボタンがクリックされたかどうかを確認します

以下のコードを使用してページを印刷しています。

window.print();

以下の画像は、Googleの印刷プレビューchromeブラウザの外観です。2つのメインボタンがあります：printとcancel。

enter image description here

ユーザーがprintまたはcancelボタンをクリックしたかどうかを知りたい。私がやったことはjqueryを使用しています：

印刷プレビューのHTMLコード：

<button class="print default" i18n-content="printButton">Print</button>
<button class="cancel" i18n-content="cancel">Cancel</button>

Jqueryコード：

 $('button > .cancel').click(function (e) {                
      alert('Cancel');
 });

 $('button > .print').click(function (e) {                
      alert('Print');
 });

私は運が悪いので上のコードを試しました。何が欠けていますか？

javascriptjqueryhtmlgoogle-chromeprinting-web-page
15
aegc

通常のWebページから直接Chromeの内部ウィンドウ（この場合は印刷ダイアログ）にアクセスすることはできません。

    (function () {

        var beforePrint = function () {
            alert('Functionality to run before printing.');
        };

        var afterPrint = function () {
            alert('Functionality to run after printing');
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');

            mediaQueryList.addListener(function (mql) {
                //alert($(mediaQueryList).html());
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;

    }());

または、印刷プレビューが開いたときに何かしたい場合は、以下をお試しください：

$(document).bind("keyup keydown", function (e) {
         if (e.ctrlKey && e.keyCode == 80) {
             setTimeout(function () { CallAfterWindowLoad();}, 5000);
             return true;
         }
     });

    function CallAfterWindowLoad()
    {
        alert("Open and call");
    }

参照： Javascript window.print（）によって呼び出されるデフォルトの印刷メニューでクリックイベントをキャプチャする方法

たぶん、この2つのボタンのクリックイベントの要件を提供すれば、代替ソリューションを提供できます。

14
Prashant Kankhara

それは非常に簡単に可能です：

<body onafterprint="myFunction()">

タグ内で定義できるmyFunction（）は、印刷ジョブが完了するか、キャンセルボタンが押されたときに発生します。

4
Madness

私の知る限り、印刷プレビューはJSがアクセスできるdocumentの一部ではありません。これらはあなたに興味があるかもしれません：

ブラウザの印刷イベントを検出しています

ExtJS 4-プログラムで呼び出された印刷ダイアログでユーザーが「印刷」を押したかどうかを検出

1
ekuusela

これでうまくいくはずです。私は、htmlファイルに含まれているjQuery v2.2.0を使用しました。

$("#print").click(function() { // calls the id of the button that will print
    document.body.style.visibility = 'hidden'; //code for hiding the body
    document.getElementById('printthis').style.visibility = 'visible'; // div to be printed
    document.getElementById('printthis').style.position = 'absolute'; //some code/css for positioning. you can adjust this
    document.getElementById('printthis').style.top = '40px';
    document.getElementById('printthis').style.left = '0px';
    if (print()) { // shows print preview.

    } else { // else statement will check if cancel button is clicked.
        document.body.style.visibility = 'visible';
        document.getElementById('printthis').style.position = '';
        document.getElementById('printthis').style.top = '';
        document.getElementById('printthis').style.left = '';
        alert("Print Canceled");
    }
});

これは、html内の特定のdivを印刷する方法としても使用されると思います。 body要素を非表示にして、印刷したいdivだけをいくつかの位置決めCSSで表示します。それがあなたのものでうまくいくことを願っています。私はそれを試しました、そしてそれは私のために働いたと言うことができます。

0
JayBee Rosalinda