vue3-print-nb 实现异步请求打印指定区域内容

问题描述

vue3+vite 使用 vue3-print-nb 的 v-print 指令打印局部内容，内容是接口返回的，但是 vue3-print-nb 的几个钩子函数不支持 async-await ，网上没找到解决方案，所以记录一下。 vue3-print-nb的github地址：github.com/Power-kxLee…

解决方案

点击按钮获取异步数据，获取之后使用模拟点击执行打印行为。

<div>
  <div id="printDom" v-print="printObj">模拟点击</div>
  <div style="display:none">
    <div id="printId">
      打印区域
      接口数据...
      接口数据...
      接口数据...
      {{ printInfo.name }}
  </div>
  </div>
  <el-button @click="handlePrint()">打印</el-button>
</div>

import { ref, nextTick } from 'vue';  
// 获取数据  
const printInfo = ref(null)
const printObj = {
  id: 'printId',
  popTitle: ''
};
async function handlePrint(){  
  const res = await api.getDate()  
  printInfo.value = res.data  
  nextTick(() => {  
    const printDom = document.getElementById('printDom');  
    printDom && printDom.click();  
  });  
}

最后

现阶段的该功能的效果是，点击打印按钮 => 请求接口 => 获取数据 => 调起打印机 => 最后点击打印 => 打印完成（如下）。 领导说：点击完 打印按钮 还要点击 系统打印 多费事儿啊，能不能点击打印一次就实现打印。。。有没有大哥指点一下。