* {…">
当前位置:首页 > JavaScript

js实现禁止打印

2026-03-01 12:31:24JavaScript

使用CSS禁用打印

在HTML的<head>部分添加以下CSS代码,可以隐藏所有内容,阻止用户打印页面:

js实现禁止打印

<style media="print">
  * {
    display: none !important;
  }
</style>

监听打印事件并阻止

通过JavaScript监听浏览器的打印事件(beforeprint),在触发时取消打印操作或跳转页面:

js实现禁止打印

window.addEventListener('beforeprint', function(e) {
  e.preventDefault();
  alert('打印功能已禁用');
  window.location.href = 'about:blank'; // 可选:跳转空白页
});

禁用打印快捷键

拦截键盘事件,阻止用户通过Ctrl+P(Windows)或Cmd+P(Mac)调起打印对话框:

document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
    e.preventDefault();
    alert('禁止使用打印功能');
  }
});

隐藏打印按钮

若页面有打印按钮,可通过JavaScript移除或禁用相关元素:

document.getElementById('printButton').style.display = 'none';
// 或直接移除
document.getElementById('printButton').remove();

注意事项

  • 以上方法无法完全阻止用户通过浏览器菜单手动选择打印,但能大幅降低打印可能性。
  • 部分浏览器可能限制对打印事件的拦截,需测试兼容性。
  • 企业级场景建议结合后端权限控制,彻底限制打印功能。

标签: js
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callback) {…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…