改为禁用打印/显示打印布局答案

【问题标题】：Disable print / displaying print layout instead改为禁用打印/显示打印布局
【发布时间】：2020-11-25 18:59:21
【问题描述】：

我需要以某种方式阻止用户在我的 Angular 应用程序中打印，而不是显示默认的打印弹出窗口，而是在谷歌地图上显示自定义布局，如果用户通过 ctrl + p 快捷方式切换打印，则用户是呈现不同的布局，并且打印弹出窗口不显示：

根据这个SO和这个MDN，打印事件是不能取消的，那么google是怎么做到的呢？

【问题讨论】：

它只是防止快捷方式。 “打印”按钮将导致弹出窗口
实现这一点的一种方法实际上是使用 CSS。您可以专门为媒体类型定义样式……例如打印。这样，您可以隐藏所有内容并显示您的地图

【解决方案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;
}

&lt;button class="print-button"&gt;Print Me&lt;/button&gt;

说明：
只需阻止 STRG+P 快捷方式并添加 CSS-Class。
这使您能够完全自定义布局。

在您的示例（谷歌地图）中确实包含一个“打印”按钮。
在我的示例中，我也尝试过处理。

PS：当 JSFiddle 链接在 stackoverflow 中不起作用时： https://jsfiddle.net/drxf6gwz/

【讨论】：

【解决方案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();
    }
})

【讨论】：