js实现打印功能

效果如图

<template>
  <el-drawer
    :title="'打印'"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
  >
    <div>
      <!-- <el-button v-print="printOption" type="primary" style="margin-left:15px;">打印</el-button> -->
      <el-button type="primary" style="margin-left:15px;" @click="print">打印</el-button>
      <div>
        <div v-for="(item) in printDataList" :key="item.id" class="draewr-item-box">
          <div class="draewr-item-list">
            <p>名称:{{ item.processname }}</p>
            <p>编号:{{ item.processid }}</p>
          </div>
        </div>
        <!-- 这部分为 采用 vue-print-nb插件 实现的打印,因不满足实际需求，放弃此方式  -->
        <!-- <div id="printArea" ref="printArea">
          <div v-for="(item) in printDataList" :key="item.id" style="padding:14px 5px 5px 5px;overflow:hidden;display: flex;align-items: center;">
            <div class="print-box">
              <p>名称:{{ item.processname }}</p>
			  <p>编号:{{ item.processid }}</p>
            </div>
          </div>
        </div> -->
        <div>
          <div ref="qrCodeUrl" style="display:none" />
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>

import QRCode from 'qrcodejs2'
export default {
  name: 'TextTranslation',
  props: {
    printDataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      // 打印配置
      printOption: {
        id: 'printArea', // 打印的容器id
        popTitle: '' // 打印页的标题
      },
      qrCodeSize: 50
    }
  },
  created() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.domInit()
      }, 100)
    })
  },
  mounted() {
  },
  methods: {
    init() {
      this.drawer = true
    },
    creatQrCode(text, elem, size) {
      elem.innerHTML = ''
      new QRCode(elem, {
        text: text,
        width: size,
        height: size,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.Q
      })
    },
    handleClose() {
    },
    domInit() {
		// 打印区域Dom生成
      let printDom = ''
      this.printDataList.forEach((item, i) => {
        let el = '<div style="overflow:hidden;display:flex;height:115px">' +
          '<div style="height:100%;margin-top:0px;">' +
          '<div class="qrcode" ref="qrcode" style="width:' + this.qrCodeSize + 'px;height:' + this.qrCodeSize + 'px;display:flex;"></div>' +
          '</div>' +
          '<div style="margin-left:5px;">' +
          '<p style="font-size:6pt;margin-top:0px">名称：' + item.processname + ' </p>' +
          '</div>' +
          '</div>'
        printDom += el
      })
      this.$refs.qrCodeUrl.innerHTML = printDom
      const elems = this.$refs.qrCodeUrl.getElementsByClassName('qrcode')
      for (let i = 0; i < elems.length; i++) {
        this.creatQrCode(this.printDataList[i].processid, elems[i], this.qrCodeSize)
      }
    },
    print() {
      setTimeout(() => {
        const newTab = window.open('_blank')
        const print = this.$refs.qrCodeUrl.innerHTML
        newTab.document.body.innerHTML = print
        newTab.print()
        newTab.close()
      }, 100)
    }
  }
}
</script>