vue-print-nb打印插件的应用

项目需求

将学生的二维码，姓名，班级 打印成贴纸，效果如图

打印后的效果

技术点

vue使用vue-print-nb进行打印# 使用步骤

使用步骤

1. 安装依赖：npm install vue-print-nb --save

2. 在main.js中引入

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

3. 在组件的打印区域标签上加 id=“printArea”

<div id="printArea"> 打印区域 <div>

4.在组件的打印按钮标签上使用指令 v-print=“print”,print是配置对象

<el-button v-print="print" type="primary">打印</el-button>

5.在组件的data中定义print配置对象

print: {
        id: 'printArea',
        popTitle: '', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },

6.配置打印的样式

打印的样式只针对打印，@media print{}不会影响页面的显示样式，本文章中，页面中显示的样式为上下结构，打印的样式为左右结构，

<style lang="scss" scoped>
#printArea{
  text-align: center;
  padding-top: 30px;
}
@media print{
  @page{
  /* 去除页眉 */ 
   /* margin-top: 0; */ 
   /* 去除页脚 */ 
   /* margin-bottom: 0; */ 
   /* 去掉页眉和页脚
   margin: 0; */
   /* 纵向 
   size: portrait;*/
   /* 横向 A4
   size:A4 landscape; */
    size: auto;
    margin: 2mm;
  }
  #printArea{
    padding-top: 0mm;
    // width:45mm;
    // height:63mm;
  }
  #printArea .ewmz{
    position: absolute;
    top: 2mm;
    left: 42mm;
    p{
      width: 40mm;
      font-size: 16px;
    }
    // text-align: center;
    // width: 40mm;
    // font-size: 14px;
    // top: 35mm;
  }
  #printArea .ewm {
    // position: absolute;
    // top: 2mm;
    // left: 2mm;
    // width:100px !important;
    // height: 100px !important;
  }
}
</style>

7.打印区域完整代码

<el-dialog title="学生二维码" :visible.sync="QRCodeVisible" width="380px">
      <div id="printArea">
        <!-- <div > -->
          <canvas ref="qrcodeCanvas" width="150" height="150"></canvas>
          <h1 class="ewmz">{{ QRCodeName }} <p>{{QRCodeClass}}</p></h1>
        </div>
      <!-- </div> -->
      <div slot="footer" class="dialog-footer">
        <!-- @click="print" -->
         <el-button type="primary"  v-print="print">打印</el-button>
        <el-button type="primary" @click="QRCodeVisible = false">关闭</el-button>
      </div>
    </el-dialog>

8.打印机的配置

应用的是得力的打印机: 得力DL-720C(NEW)条码标签打印机(白)(台),以下为配置的图