Vue.js网页打印小票实例(二维码/条形码)

<template>
  <div>
    // 用iframe实现区域打印
    <iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;"></iframe>
    // 这里是需要打印的内容，根据需求可以隐藏也可以显示
    <div ref="odiv" style="display: none">
      // 纸张是100mm*100mm,根据公式计算长宽大约是377px(可以根据实际进行调整)
      <div v-for="(item,index) in printInfo" style="width: 377px;height: 378px;position: relative;box-sizing: border-box">
        <div style="position: absolute;top: 25px; left: 5px;">
          <div style="font-size: 18px;font-weight: 800">测试信息</div>
          <div style="font-size: 12px;font-weight: 600">{{ item.time }}</div>
        </div>
        <div style="position: absolute;top: 10px; right: 10px;">
          <img :src="item.barCodeData | creatBarCode"/>
        </div>
        // 打印内容的css需要使用行内式，这样才能保证打印时候css起作用
        <div style="position: absolute;top: 70px; left: 5px;width: 365px;height: 1px;border: none;border-top: 1px solid #555"></div>
        <div style="width:365px;position: absolute;top: 73px; left: 5px;font-size: 13px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试编码：<span style="font-weight: 600">{{ item.sapNo }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试名称：<span style="font-weight: 600">{{ item.mName }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试日期：<span style="font-weight: 600">{{ item.sDate }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试一项：<span style="font-weight: 600">{{ item.bDate }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试二项：<span style="font-weight: 600">{{ item.spec }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试三项：<span style="font-weight: 600">{{ item.gys }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试四项：<span style="font-weight: 600">{{ item.cctj }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试五项：<span style="font-weight: 600">{{ item.dkc }}</span> kg</div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试六项：<span style="font-weight: 600">{{ item.dq }}</span> 天</div>
          <div style="box-sizing: border-box;flex: none;width: 50%;line-height: 2">测试七项：<span style="font-weight: 600">{{ item.is }}</span></div>
          <div style="box-sizing: border-box;flex: none;width: 100%;line-height:2">测试八项：<span style="font-weight: 600">{{ item.gmy }}</span></div>
        </div>
        <div style="position: absolute;top: 235px; left: 5px;width: 365px;height: 1px;border: none;border-top: 1px solid #555"></div>
        <div style="position: absolute;top: 252px; left: 66%;">
          <img :src="item.qrCodeData | creatQrCode"/>
        </div>
      </div>
    </div>
    <button @click="printpage()">打印</button>
  </div>
</template>

<script>
  import JsBarcode from 'JsBarcode';
  import qrcode from 'qrcode';
  export default {
    name: 'test',
    data() {
      return {
        printInfo: [
          {
            barCodeData: '21312313213',
            qrCodeData: '测试二维码测试二维码测试二维码',
            time: '2019-09-09 12:12:00',
            sapNo: '123456',
            mName: '测试名字',
            sDate: '2019-09-09',
            bDate: '12月',
            spec: '袋装25公斤',
            gys: '测试测试',
            cctj: '冷藏',
            dkc: '1000',
            dq: '12',
            is: '否',
            gmy: ''
          }
        ]
      }
    },
    methods:{
      printpage(id){
        // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
        var printIframe = this.$refs.printIframe;
        var newstr = this.$refs.odiv.innerHTML;
        printIframe.setAttribute('srcdoc',newstr);
        printIframe.onload = function () {
          console.log(printIframe.contentWindow);
          // 去掉iframe里面的dom的body的padding margin的默认数值
          printIframe.contentWindow.document.body.style.padding = '0px';
          printIframe.contentWindow.document.body.style.margin = '0px';
          // 开始打印
          printIframe.contentWindow.focus();
          printIframe.contentWindow.print();
        };
      }
    },
    filters: {
      creatBarCode(barCodeData){
        let canvas = document.createElement("canvas");
        JsBarcode(canvas, barCodeData, {
          format: "CODE128",
          displayValue: true,
          margin: 0,
          height: 40,
          width: 1.5,
          fontSize: 12,
          textMargin: 0
        });
        return canvas.toDataURL("image/png");
      },
      creatQrCode(qrCodeData){
        let typeNumber = 10;
        let errorCorrectionLevel = 'L';
        qrcode.stringToBytes = qrcode.stringToBytesFuncs['UTF-8'];
        let qr = qrcode(typeNumber, errorCorrectionLevel);
        qr.addData(qrCodeData,'Byte');
        qr.make();
        return qr.createDataURL(2,0);
      }
    },
  }
</script>

/**
 * @description mm转px,此函数只适用于屏幕为96DPI的设备(大部分都是)
 * @method mmTopx
 * @param {number} mm 毫米
 * @return {number} px 像素
 */
function mmToPx(mm) {
  var m = parseFloat(mm);
  var px = (m*0.0393*96).toFixed(2);
  return px;
}