* {…">
当前位置:首页 > 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,它们功能丰富且易于集成。 安装 swip…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点…