Vue2/3 实现打印功能 亲测有效_vue3 打印a3

需求 我司有一个需求需要连接热敏打印机和A4打印机 需要前端生成条形码以及连接打印机实现打印功能，如果是A4纸那么实现就很简单。如果纸张不是A4等A系列那么就需要做适配纸张。

打印我只推荐Vue-print-nb这个库 其他库都有兼容性问题

如果有打印中条形码功能一定要阅读这篇文章http://t.csdnimg.cn/QpzPo

下图就是我司连接热敏打印机的所用到的纸张大小 吊牌类型纸张(面积很小)A4很简单这就不提了

第一步:安装第三方库

Vue2.0版本安装方法：

npm install vue-print-nb --save
yarn add vue-print-nb

Vue3.0版本安装方法：

npm install vue3-print-nb --save
yarn add vue3-print-nb

第二步:全局挂载

Vue2.0引入方式：

import Print from 'vue-print-nb'
Vue.use(Print)

Vue3.0引入方式：

import Print from 'vue3-print-nb'
app.use(Print).mount('#app')

第三步:创建打印容器 要隐藏掉DOM节点且不能被删除只能使用v-show不能用v-if 

  <div id="printMe" v-show="false" >

    <!-- 打印的范围区域 id是用来获取打印的区域 --> 

  </div>

第四步:实现打印 使用v-print="printObj"可以使被绑定的元素获得点击唤起打印页面的功能

 <el-button  v-print="printObj" >打印商品条码</el-button>

注意:如果打印文本的内容是后端返回或者是异步的需要绘制一个预览页面 能预览页面的DOM数据加载完成之后再去掉用打印操作 (打印操作的唤起在Mounted之前 会导致打印页面为空白的)

思路↓↓↓↓↓

 <!-- 点击先唤起打印drawer弹框 -->
    <el-drawer
      :destroy-on-close="true"
      v-model="outerVisible"
      title="打印预览内容(单张)"
    >
      <PrinPage :arrList="[prinList[0]]" v-if="prinList.length" />
      <PrinPage id="printMe" :arrList="prinList" v-show="false" />
      <div v-if="!prinList.length">暂无打印数据</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" icon="Printer" v-print="printObj"
            >打印商品条码</el-button
          >
        </span>
      </template>
 </el-drawer>
 
思路:PrinPage 这个组件是被打印页面的区域 
1.调用两次组件 第一个用来展示打印的页面 打印是靠ID进行区分的所以第一个不能给ID 第二个用v-show隐藏数据会和第一个一起进行加载
2.利用透传把需要打印的ID传入到组件内部去
3.在drawer内部绑定v-print="printObj"方法 来实现真正打印功能 此时页面的数据都加载完成

 注意:打印的表格需要用原生HTML不能用组件库否则又兼容性问题

    /我这边的表格头部都是后端动态传入的 包括key和value 只需要知道表格需要原生绘制即可/
 
<table class="product-table">
            <thead>
              <tr>
                <th>序号</th>
                <th v-for="headerItem in item.header" :key="headerItem">
                  {{ headerItem.lable }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(product, index) in item.value" :key="index">
                <td>{{ index + 1 }}</td>
                <td v-for="valueItem in item.header" :key="valueItem">
                  {{ product[valueItem.value] }}
                </td>
              </tr>
              <tr>
                <td :colspan="item.header.length - 1"></td>
                <td>合计</td>
                <td>{{ item.fixation.total }}</td>
              </tr>
              <tr>
                <td>备注</td>
                <td :colspan="item.header.length"></td>
              </tr>
            </tbody>
    </table>

总结：打印功能很简单绘制需要打印的页面即可 麻烦的是打印中包含条形码 我们需要做PDA扫码容错

下面是A4和挂牌的效果图↓↓↓↓↓↓↓