确定是否单击了Google Chrome的打印预览中的打印/取消按钮

2w3rbyxf 于 12个月前发布在 Go

关注(0)|答案(6)|浏览(191)

我一直在使用下面的代码打印我的页面：

window.print();

下面的图片是什么打印预览在Chrome浏览器看起来像。它有两个主要按钮：print和cancel。

我想知道用户是否单击了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');
 });

我试了上面的代码，没有运气。我错过了什么？

google-chrome

来源：https://stackoverflow.com/questions/29912933/determine-if-print-cancel-button-in-google-chromes-print-preview-is-clicked

6条答案

按热度按时间

6qfn3psc1#

您无法直接从常规网页访问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");
    }

参考：How to capture the click event on the default print menu called by Javascript window.print()
也许如果您提供您的要求，这两个按钮点击事件，我们可以为您提供一个替代的解决方案。

赞(0）回复(0）举报 12个月前

1sbrub3j2#

这是很容易做到：

<body onafterprint="myFunction()">

当打印作业完成或按下取消按钮时，将触发可以在标记中定义的myFunction（）。

赞(0）回复(0）举报 12个月前

g0czyy6m3#

<script>
            window.print();

            onafterprint = function () {
                window.location.href = "index.html";
            }
</script>

赞(0）回复(0）举报 12个月前

j0pj023g4#

据我所知，打印预览不是你的JS可以访问的任何document的一部分。这些可能会让你感兴趣：
Detecting browser print event
ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically

赞(0）回复(0）举报 12个月前

xkrw2x1b5#

试试这个调整后的代码：

<html>
    <head>
    <script>
    function wind()
    {
        
    document.getElementById('prin').style.display='none'; 
        window.print();
        window.addEventListener("click", function()
        {
            document.getElementById('prin').style.display='block';
        }
        );
    }
    </script>
    </head>
    <body>
        <button id="prin" onclick="wind()">Print</button>
    </body>
    </html>

赞(0）回复(0）举报 12个月前

p1iqtdky6#

这个应该可以了我使用的是jQuery v2.2.0，它包含在html文件中。

$("#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元素，只显示你想用一些定位css打印的div。希望它在你的工作。我试过了，我可以说它对我有效。

赞(0）回复(0）举报 12个月前

我来回答

确定是否单击了Google Chrome的打印预览中的打印/取消按钮

6条答案

相关问题

热门标签

最新问答