window.print()取消按钮回调

原创已于 2022-07-15 11:07:56 修改 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端

于 2022-07-15 11:06:49 首次发布

本文介绍如何在网页中通过JavaScript控制打印前隐藏按钮，点击取消时恢复显示。通过`beforePrint`和`afterPrint`事件，配合matchMedia和监听媒体查询，确保了打印过程中的用户体验。

前景提要

要实现打印功能，并且按钮不需要打印。当直接使用打印前将按钮隐藏，点击取消打印时，按钮将不会出现。在这里插入图片描述

如何实现

//beforePrint  打印前将按钮隐藏
afterPrint  取消时将按钮回显
其他内容可以完全复制，就可以用

 var beforePrint = function() {
        $("#exportZghfd").hide()
        $("#dyZghfd").hide()
        $("#from_btns").hide()

    };

    var afterPrint = function() {
        $("#exportZghfd").show()
        $("#dyZghfd").show()
        $("#from_btns").show()
    };

    if (window.matchMedia) {   
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
    
    $("#dyZghfd").click(function () {
        window.print();
    })