前端生成二维码 + 页面局部打印
一、使用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 版权协议,转载请附上原文出处链接和本声明。