vue实现打印二维码
安装二维码生成库
使用 qrcode 或 vue-qrcode 库生成二维码。通过 npm 安装：
npm install qrcode vue-qrcode生成二维码
在 Vue 组件中引入库并生成二维码。以 vue-qrcode 为例：
<template>
<div>
<qrcode :value="qrText" :size="200"></qrcode>
<button @click="printQRCode">打印二维码</button>
</div>
</template>
<script>
import Qrcode from 'vue-qrcode';
export default {
components: { Qrcode },
data() {
return {
qrText: 'https://example.com'
};
},
methods: {
printQRCode() {
window.print();
}
}
};
</script>设置打印样式
在 public/index.html 或组件内添加 CSS 隐藏非打印内容，确保仅打印二维码：
<style>
@media print {
body * {
visibility: hidden;
}
.qrcode-container, .qrcode-container * {
visibility: visible;
}
.qrcode-container {
position: absolute;
left: 0;
top: 0;
}
}
</style>使用原生 QRCode 库（可选）
若需更多控制，使用 qrcode 原生库生成 Canvas 或 Image：
import QRCode from 'qrcode';
methods: {
generateQR() {
QRCode.toCanvas(document.getElementById('canvas'), this.qrText, { width: 200 }, (error) => {
if (error) console.error(error);
});
}
}注意事项
- 打印前确保二维码尺寸适合纸张。
- 测试不同浏览器的打印兼容性，必要时使用
@media print调整布局。 - 动态内容需在打印前更新二维码数据。
