禁用打印/显示打印布局

Question

我需要以某种方式阻止用户在我的角度应用程序中打印，而不是显示默认的打印弹出窗口，而是在google地图上显示一个自定义布局，如果用户通过ctrl +p快捷方式切换打印，用户将显示一个不同的布局，而打印弹出将不会显示：

​

​

根据这个所以和这个MDN，打印事件是不可取消的，那么谷歌是怎么做到的呢？

Answer 1

当有人想要一个“现场”的例子时，我在这里创建了一个快速的例子：

​

document.addEventListener('keydown', function (event) {
    // listen for ctrl+p
    if (event.key === "p" && event.ctrlKey === true) {
        event.preventDefault();
        
        // add class to html element
        document.documentElement.classList.toggle('print-layout');
    }
})

var printButton = document.querySelector('.print-button');

// just trigger print popup
printButton.addEventListener('click', function() {
    window.print();
})

body {
  background: red;
}


.print-button {
  display: none;
}

.print-layout body {
  background: white;
}

.print-layout .print-button {
  display: block;
}

<button class="print-button">Print Me</button>

​

描述：

只需防止STRG+P剪裁，并添加一个Class。

这给你的能力，定制您的布局完全。

在你的例子中(谷歌地图)确实包括一个“打印”按钮。

在我的例子中，我也试图处理这个问题。

PS: JSFiddle链接(当它在堆栈溢出中不起作用时)：https://jsfiddle.net/drxf6gwz/

Answer 2

如注释中所述，您可以连接到键盘快捷方式事件。

document.body.addEventListener('keydown', function (event) {
    // listen for ctrl+p
    if (event.key === "p" && event.ctrlKey === true) {
        event.preventDefault();
        // do something...
        // ...
        // when you are ready to print
        window.print();
    }
})