vue 生成二维码并打印
时间: 2023-10-30 10:05:12 浏览: 107
vue中实现动态生成二维码的方法
5星 · 资源好评率100%
要在Vue中生成二维码并打印,你可以使用qrcode.js和html2canvas库。下面是一个简单的实现示例:
1. 安装qrcode.js和html2canvas
```bash
npm install qrcodejs2 html2canvas --save
```
2. 在Vue组件中引入库
```javascript
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
```
3. 在Vue组件中定义一个函数来生成二维码
```javascript
generateQRCode() {
const qrcode = new QRCode('qrcode', {
text: 'https://www.example.com', // 二维码内容
width: 256, // 二维码宽度
height: 256, // 二维码高度
colorDark : '#000000', // 二维码颜色
colorLight : '#ffffff', // 二维码背景色
correctLevel : QRCode.CorrectLevel.H // 二维码纠错级别
})
}
```
4. 在Vue组件中定义一个函数来打印页面
```javascript
print() {
html2canvas(document.body).then(canvas => {
const printWindow = window.open('', 'Print', 'height=600,width=800')
printWindow.document.write('<html><head><title>Print</title></head><body></body></html>')
printWindow.document.body.appendChild(canvas)
printWindow.document.close()
printWindow.print()
})
}
```
5. 在Vue组件中使用生成二维码和打印页面的函数
```vue
<template>
<div>
<div id="qrcode"></div>
<button @click="generateQRCode">生成二维码</button>
<button @click="print">打印页面</button>
</div>
</template>
<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
export default {
methods: {
generateQRCode() {
const qrcode = new QRCode('qrcode', {
text: 'https://www.example.com', // 二维码内容
width: 256, // 二维码宽度
height: 256, // 二维码高度
colorDark : '#000000', // 二维码颜色
colorLight : '#ffffff', // 二维码背景色
correctLevel : QRCode.CorrectLevel.H // 二维码纠错级别
})
},
print() {
html2canvas(document.body).then(canvas => {
const printWindow = window.open('', 'Print', 'height=600,width=800')
printWindow.document.write('<html><head><title>Print</title></head><body></body></html>')
printWindow.document.body.appendChild(canvas)
printWindow.document.close()
printWindow.print()
})
}
}
}
</script>
```
阅读全文