vue-print-nb 或 vue3-print-nb 打印

<template #header>
      <el-button type="primary" @click="toAdd">添加</el-button>
      <el-button type="primary"  v-print="print" @click="add">打印</el-button>
    </template>
    <div id="printDiv" style="width: 100%">
      <div style="page-break-after:always" v-for="(it ,ie) in arrdatalist" :key="ie">
            <div style="margin: auto; text-align: center;">{{ it. idname}}</div>
            <div style="display: flex;">
                <div>订单号:20230901-31-241</div>
                <div style="padding-left: 50px;">供应商:湖北绿秀粮油集团有限公司厨务</div>
            </div>
            <div>配送时间:2023-09-04 06:20:00-2023-09-04 06:30:00 </div>
            <table style="margin-top: 0.5rem;">
              <tbody >
                <tr  v-for="(item,index) in it.number.list " :key = "index">
                  <td style="width: 5%; text-align: center;border-bottom: 1px solid gray;border-right: 1px solid gray"  :colspan="it.colspan"
                  v-for="(it,index) in item.numberdata " :key = "index" >{{ it.tape }}</td>
                </tr>

              </tbody>
            </table>
      </div> 
    </div>

//这里是打印的配置项
const  print=ref({
        id: 'printDiv',//这里的id就是上面我们的打印区域id，实现指哪打哪
        popTitle: ' ', // 打印配置页上方的标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
        previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
        beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了！') },
 
      })