2021-02-26

调用window.print()方法，如何获取打印预览界面出现和关闭状态？

点击打印后会调用window.print()方法，随后出现浏览器自带的打印预览页面，并有打印按钮和取消按钮，如何获取到打印预览界面出现和关闭状态？以便于执行打印前后的回调函数。

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

    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

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

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

拓展：打开一个新窗口 => 写入打印内容 => 停止写入内容（写入内容可能有接口请求或是异步的，document.close()可能监听写入执行完毕）=> 调用打印机设备 => 关闭打印弹框和打印机设备

var pwin = window.open(); //打开一个新窗口
pwin.document.write(printStr); //写入打印内容
pwin.document.close(); //额...这个我也不知道什么意思 哈哈
pwin.print(); //调用打印机
pwin.close() //这个点取消和打印就会关闭新打开的窗口