平常开发中经常遇到前端实现打印功能，打印之后处理一些交互逻辑，这时就要用到监听打印后事件了。
以下整理了几种常用打印后回调事件
- window.print()打印后回调事件
- iframe 局部打印后回调事件
- vue-easy-print 打印后回调事件
浏览器打印window.print()
beforeprint 打印前回调事件
该事件是浏览器弹出打印弹框时触发
afterprint 打印后回调事件
afterprint 是点击打印或取消按钮都会触发
mounted() {
// 监听打印完成事件
window.addEventListener("afterprint", function (event) {
// 打印完成后的逻辑处理
console.log("打印完成");
});
},
利用iframe 局部打印
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe id="frame" src="test.html" frameborder="0"></iframe>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
var iframe = document.getElementById('iframeRef');
ifrmae.style.display = "none";
iframe.contentWindow.focus();
iframe.contentWindow.print();
</script>
</body>
</html>
iframe 监听打印后回调事件
重点 printIframe.contentWindow.onafterprint
onAfterPrint() {
const printIframe = document.getElementById('iframeRef');
printIframe.contentWindow.onafterprint = function () {
//弹框关闭逻辑
console.log("关闭打印弹框");
}
}
vue-easy-print 组件监听打印后事件
在这里详细说下使用 vue-easy-print 组件是怎么监听打印事件，绑定属性id名称是easyPrintIframe，所以可以通过id来获取到打印元素监听它的打印行为，详细代码如下
onAfterPrint() {
const printIframe = document.getElementById('easyPrintIframe');
printIframe.contentWindow.onafterprint = function () { //弹框关闭逻辑
console.log("关闭vue-easy-print 打印弹框");
} }
业务需求描述
产品经理要求打印后记录打印时间,打印次数，后端进行落表，后期展示出来， afterpirnt 回调函数点击打印或取消都会触发，所以无法判断点击是打印还是取消按钮，经过多种方法尝试还是没有实现。 有哪位大佬有好的解决办法可以放在评论区，感谢你的分享~~
