使用浏览器的打印功能(window.print),主要框架是vue+elementui,如何实现打印进度

使用浏览器的打印功能(window.print),主要框架是vue+elementui,如何实现打印进度

打印进度可以考虑通过Element UI中的MessageBox、Loading等组件来实现

printDocument() {
  this.$alert('正在打印,请稍等...', '提示', {
    confirmButtonText: '确定',
    callback: () => {
      this.$loading({
        lock: true,
        text: '正在打印...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        window.print();              //打印函数
        this.$nextTick(() => {
          this.$loading.close();
        });
      }, 1000);
    }
  });
}

希望能帮到你,加油~~~


window.matchMedia('print').addListener((event) => {
  if (event.matches) {
    console.log('打印开始');
  } else {
    console.log('打印结束');
  }
});

window.print();