前端生成二维码 + 页面局部打印

一、使用vue-qr 生成二维码

1.下载 vue-qr

 npm install vue-qr --save

2.引入

import vueQr from 'vue-qr/src/packages/vue-qr.vue'

3.页面使用

text 就是二维码传递的数据
我是单独封装的组件

  <vueQr
    ref="qrcode"
    :logoScale="0.3"
    :text="text"
    correntLevel="0"
    :size="200"
    magin="auto"
    colorDark="black"
    colorLight="white"
  ></vueQr>

二、前端局部打印页面

1.html

//因为不想在页面中展示这个盒子,所以设置了 display: none
  <div style="display: none">   
    <!--startprint-->
    // 中间这一块是  要局部打印的内容    我是需要打印的一个循环数组
    <div v-for="item in qsCodeList" :key="item.id" style="display: flex">
      <div>
        <p style="text-align: center">{{ item.name }}</p>
        //这个是我封装的生成二维码组件
        <qsCode ref="qsCodeRef" :text="item.productCode"></qsCode>
      </div>
    </div>
    <!--endprint-->
  </div>

2.js部分

//打印的具体方法
let qsCodeList = ref<any>([])
const exportQsCode = (e) => {
  loading.value = true
  detailsList.value.forEach((item) => {
    let m = {
      productCode: item.productCode,
      id: item.id,
      name: item.name + item.noteCode
    }
    qsCodeList.value.push(m)
  })
  //因为生成二维码是异步操作,所以获取需打印的部分页面,我放在了异步操作中
  setTimeout(() => {
    let bdhtml = window.document.body.innerHTML
    let sprnstr = '<!--startprint-->'
    let eprnstr = '<!--endprint-->'
    // substr
    let prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 17)
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr))
    getPrintHtmlText(prnhtml)
    qsCodeList.value = []
    loading.value = false
  }, 300)
}
这个方法是根据传入的HTML内容进行打印
const getPrintHtmlText = (html) => {
  let date = new Date().getTime()
  let ifr = document.createElement('iframe')
  ifr.style.frameborder = 'no'
  ifr.style.display = 'none'
  ifr.style.pageBreakBefore = 'always'
  ifr.setAttribute('id', 'printPdf' + date)
  ifr.setAttribute('name', 'printPdf' + date)
  document.body.appendChild(ifr)
  ifr.contentWindow.document.write(html)
  let ordonnance = document.getElementById('printPdf' + date).contentWindow
  setTimeout(() => {
    ordonnance.print()
  }, 100)
  window.URL.revokeObjectURL(ifr.src)
}

版权声明:本文为m0_67206644原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>