VUE+vue-print-nb，vue打印我踩过的坑

这几天写了一个需求，要求打印条形码，先来张要打印出来的效果图吧，效果图大概长这样子（图是我随便找的，二维码扫出来是啥我也不知道，哈哈）

写这个需求的时候踩了太多的坑了，在此记录下辛酸史。

vue-print-nb基本用法

这个插件用法很简单，安装依赖后就可以直接使用(npm install vue-print-nb)，点击打印就会唤起打印弹框。

 <div style="display:none;">
      <div id="printStyle" ref="printTest">
      　<div v-for="(item,index) in printList" :key="index" style="display:inline-block;padding:20px;margin-bottom:4px">
          <table style="fontSize:20px">
            <tr><th colspan="2">天然气有限公司</th></tr>
            <tr><td colspan="2">资产名称：{{ item.name }}</td></tr>
            <tr><td colspan="2">资产型号：{{ item.model }}</td></tr>
            <tr>
              <td>资产编码：{{ item.assetsCode }}</td>
              <td rowspan="2" style="padding:0 10px">
                <div ref="codeItem" class="qrcode-pic" />
              </td>
            </tr>
            <tr><td>使用日期：{{ item.assetsTime }}</td></tr>
          </table>
        </div>
      </div>
      <button ref="printBtn" v-print="'#printStyle'">打印</button>
    </div>

第一个坑：打印总是会多出一个空白页

解决办法：不能给html设置高度！！！

html {
    // height: 100%;
    box-sizing: border-box;
}

第二个坑：img标签无法打印，识别不出

解决办法：将需要打印的内容转为图片打印出来

//需要打印的图片
<img id="printStyle" style="display:none" :src="meetingDetail.qrCode" alt="">

//触发打印的事件
<el-button id="printQrcode" v-print="'#printStyle'" style="display:none" type="primary">二维码打印</el-button>

import html2canvas from 'html2canvas'
import printJS from 'print-js'

// 打印二维码
printQrcode () {
  html2canvas(this.$refs.printStyle, {
    backgroundColor: null,
    useCORS: true,
    windowHeight: document.body.scrollHeight
  }).then((canvas) => {
    const url = canvas.toDataURL()
    printJS({
      printable: url,
      type: 'image',
      documentTitle: '打印图片'
    })
  })
},