<template>
|
<a-card>
|
<!-- 操作按钮 -->
|
<a-button type="primary" @click="handlePrint">生成并打印二维码</a-button>
|
<a-button @click="handleBatchGenerate">批量生成二维码</a-button>
|
|
<!-- 隐藏的打印区域 -->
|
<div id="printContainer" v-show="false">
|
<img :src="qrData.image" alt="二维码" style="width: 5cm; height: 5cm;">
|
<div style="margin-top: 10px; font-size: 16px;" class="qr-content">{{ qrData.content }}</div>
|
</div>
|
|
<div id="printArea" style="display: block;">
|
<div v-for="(item, index) in qrList" :key="index" class="qrcode-item">
|
<img :src="item.base64" alt="QR Code">
|
<p>{{ item.content }}</p>
|
</div>
|
</div>
|
</a-card>
|
</template>
|
|
<script>
|
import { getAction } from '@/api/manage'
|
import printJS from 'print-js';
|
|
export default {
|
data() {
|
return {
|
qrData: {
|
image: '',
|
content: ''
|
},
|
qrList: []
|
}
|
},
|
methods: {
|
// 生成并打印二维码
|
handlePrint() {
|
|
getAction('/tms/qyCode/generate').then(res => {
|
if (res.success) {
|
this.qrData = res.result;
|
// 确保DOM更新后执行打印
|
this.$nextTick(() => {
|
this.printQrCode();
|
});
|
}
|
});
|
},
|
|
// 执行打印操作
|
printQrCode() {
|
// 1. 创建打印内容
|
const printContent = document.getElementById('printContainer').innerHTML;
|
|
// 2. 创建打印窗口
|
const printWindow = window.open('', '_blank');
|
|
// 3. 写入打印内容
|
printWindow.document.write(`
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>二维码打印</title>
|
<style>
|
body {
|
margin: 0;
|
padding: 0;
|
font-family: Arial, sans-serif;
|
}
|
@media print {
|
@page {
|
size: auto;
|
margin: 0;
|
}
|
body {
|
margin: 0;
|
}
|
}
|
.qr-label {
|
width: 60mm;
|
height: 40mm;
|
padding: 2mm;
|
box-sizing: border-box;
|
border: 1px dotted #ccc; /* 打印时不会显示 */
|
text-align: center;
|
}
|
.qr-image {
|
width: 30mm;
|
height: 30mm;
|
display: block;
|
margin: 0 auto;
|
}
|
.qr-content {
|
font-size: 10pt;
|
margin-top: 1mm;
|
word-break: break-all;
|
}
|
</style>
|
</head>
|
<body>
|
${printContent}
|
<script>
|
// 自动触发打印并关闭窗口
|
window.onload = function() {
|
setTimeout(function() {
|
window.print();
|
window.onafterprint = function() {
|
window.close();
|
};
|
// 兼容Safari
|
if (window.matchMedia) {
|
const mediaQueryList = window.matchMedia('print');
|
mediaQueryList.addListener(function(mql) {
|
if (!mql.matches) {
|
setTimeout(function() {
|
window.close();
|
}, 300);
|
}
|
});
|
}
|
}, 100);
|
};
|
<\/script>
|
</body>
|
</html>
|
`);
|
|
printWindow.document.close();
|
},
|
|
// 批量生成二维码
|
async handleBatchGenerate() {
|
getAction('/tms/qyCode/batchGenerate').then(res => {
|
if (res.success) {
|
this.qrList = res.result.map((content, i) => ({
|
content:res.result[i].content,
|
base64: res.result[i].image
|
}));
|
this.handleBacthPrint();
|
}
|
})
|
},
|
|
// 执行打印
|
handleBacthPrint() {
|
this.$nextTick(() => {
|
printJS({
|
printable: 'printArea',
|
type: 'html',
|
style: `
|
.qrcode-item {
|
page-break-inside: avoid;
|
margin: 10px;
|
text-align: center;
|
}
|
img { width: 100px; height: 100px; }
|
`,
|
scanStyles: false
|
});
|
});
|
}
|
}
|
}
|
</script>
|
