在Vue中,可以使用window.onafterprint事件来监听浏览器的打印功能。下面是一个示例:

<template>
  <div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      window.print(); // 调用浏览器的打印功能
    }
  },
  mounted() {
    window.addEventListener('afterprint', this.handlePrint); // 监听打印完成事件
  },
  beforeDestroy() {
    window.removeEventListener('afterprint', this.handlePrint); // 在组件销毁前移除事件监听
  },
  methods: {
    handlePrint() {
      console.log('打印完成');
      // 在这里可以执行一些打印完成后的操作
    }
  }
};
</script>

在上面的代码中,@click="print"绑定了一个按钮点击事件,当用户点击按钮时,会调用print方法,触发浏览器的打印功能。

mounted钩子函数中,我们通过window.addEventListener方法监听afterprint事件,并将其与handlePrint方法关联起来。这样,当浏览器完成打印后,handlePrint方法会被调用。

另外,在组件销毁前,需要使用window.removeEventListener方法移除事件监听,以防止内存泄漏。

Logo

前往低代码交流专区

更多推荐