如何取消window.print()默认打印行为，触发自定义打印函数？

嘿，这个问题其实挺常见的，但得先给你浇个小冷水：你没法直接拦截浏览器原生打印对话框里的「打印」按钮点击事件——因为那个对话框是浏览器自己的控件，不属于你的网页DOM，JavaScript根本碰不到它的按钮事件。

不过别慌，有两个可行的方案能达到你想要的效果，看你需求选：

方案一：自定义打印弹窗（推荐，完全可控） #

与其跟原生对话框死磕，不如自己做一个模拟的打印弹窗，这样所有按钮的行为都由你说了算。比如这样写：

<!-- 自定义打印弹窗，默认隐藏 -->
<div id="customPrintModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:24px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.15); background:white; z-index:9999;">
  <h3 style="margin-top:0;">确认打印</h3>
  <p>是否要执行自定义打印操作？</p>
  <div style="display:flex; gap:12px; justify-content:flex-end; margin-top:16px;">
    <button id="customCancelBtn" style="padding:8px 16px; border:1px solid #ccc; border-radius:4px; background:white; cursor:pointer;">取消</button>
    <button id="customPrintBtn" style="padding:8px 16px; border:none; border-radius:4px; background:#007bff; color:white; cursor:pointer;">打印</button>
  </div>
</div>

<script>
// 触发自定义弹窗的函数，替代原来的window.print()
function triggerCustomPrint() {
  document.getElementById('customPrintModal').style.display = 'block';
}

// 绑定自定义打印按钮的事件
document.getElementById('customPrintBtn').addEventListener('click', function() {
  // 先隐藏弹窗
  document.getElementById('customPrintModal').style.display = 'none';
  // 触发你的自定义函数
  personalised();
});

// 绑定取消按钮的事件
document.getElementById('customCancelBtn').addEventListener('click', function() {
  document.getElementById('customPrintModal').style.display = 'none';
});

// 你的自定义打印逻辑
function personalised() {
  console.log('执行我的自定义打印操作啦！');
  // 这里写你实际要做的代码，比如生成打印内容、调用接口等等
}
</script>

之后你原来调用window.print()的地方，换成调用triggerCustomPrint()就行。这个方案的好处是100%可控，想加什么功能都可以。

方案二：利用打印前后的事件（无法阻止原生打印） #

如果你非要用原生的打印对话框，那可以监听beforeprint和afterprint事件在打印前后执行代码，但没法阻止用户点击「打印」后的默认打印行为。比如：

window.addEventListener('beforeprint', function() {
  console.log('用户打开了打印对话框，马上要打印了');
  // 这里可以做一些打印前的准备，比如修改页面样式、隐藏不需要打印的内容
});

window.addEventListener('afterprint', function() {
  console.log('打印完成或者用户取消了打印');
  // 这里可以恢复页面原来的样式
});

但要注意，这个方案只是给你加了两个钩子，没法替换默认的打印动作——用户点了打印按钮，浏览器还是会执行原生的打印流程。

总结一下：如果你的核心需求是完全替换默认打印行为，那一定要用方案一的自定义弹窗；如果只是想在打印前后做点额外操作，方案二就够用。

内容的提问来源于stack exchange，提问作者Pax