<template>
|
<div class="app-container">
|
<el-row>
|
<el-col :span="8">
|
<div>
|
<div id="printMe">
|
<p style="margin-left: 30px">9900166410</p>
|
<p style="margin-left: 30px">HW.001.001</p>
|
<p style="margin-left: 30px">SW.001.001</p>
|
<br>
|
<br>
|
<br>
|
<br>
|
<br>
|
<span style="font-size: 20px;font-weight: bold;margin-left: 40px">GEELY</span><br>
|
<span style="font-size: 10px;margin-left: 15px">COMMERCIAL VEHICLE</span><br>
|
<span style="margin-left: 43px">H2155D</span><br>
|
<span style="margin-left: 43px">993083</span><br>
|
<span style="margin-left: 20px">9900166410</span><br>
|
<span style="font-size: 10px;margin-right: 7px">0RSPBFAA1A2E3ADC40000027</span>
|
<br>
|
<br>
|
<br>
|
<br>
|
<br>
|
<div ref="canvasWrapper" id="canvasWrapper" style="display: flex;justify-content: center;margin-top: -30px"></div>
|
<span style="font-size: 7px;word-break: break-all;display: flex;justify-content: center;">{{text1}}</span>
|
</div>
|
<el-button @click="print1">打印</el-button>
|
<el-button @click="test1">生成二维码</el-button>
|
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div>
|
<div style="text-align: center" id="printMe1">
|
<p>9900166410</p>
|
<p>HW.001.001</p>
|
<p>SW.001.001</p>
|
</div>
|
<el-button @click="print2">打印</el-button>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div>
|
<div id="printMe2">
|
<span style="font-size: 20px;font-weight: bold;margin-left: 40px">GEELY</span><br>
|
<span style="font-size: 10px;margin-left: 15px">COMMERCIAL VEHICLE</span><br>
|
<span style="margin-left: 43px">H2155D</span><br>
|
<span style="margin-left: 43px">993083</span><br>
|
<span style="margin-left: 20px">9900166410</span><br>
|
<span style="font-size: 10px;margin-right: 7px">0RSPBFAA1A2E3ADC40000027</span>
|
</div>
|
<el-button @click="print3">打印</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
|
</div>
|
</template>
|
|
<script>
|
|
import QRCode from "qrcodejs2";
|
|
export default {
|
name: "Instructions",
|
data() {
|
return {
|
text1: 'P9900166410#T0RSPBFAA1A2E3ADC40000027#V993983#SSW001.001#HHW001.001#NBMS#',
|
text2: '1234',
|
text3: '1234',
|
|
|
};
|
},
|
created() {
|
},
|
mounted() {
|
this.test1()
|
},
|
methods: {
|
print1() {
|
// 新开页面打印
|
let newStr = document.getElementById('printMe').innerHTML;
|
let newWin = window.open('', '_blank');
|
newWin.document.body.innerHTML = newStr;
|
newWin.print();
|
return false;
|
},
|
test1(){
|
document.getElementById('canvasWrapper').innerHTML = '';
|
this.$nextTick(() => {
|
let qrCode = new QRCode('canvasWrapper',{
|
width: 120,
|
height: 120,
|
text: this.text1,
|
colorDark: '#000',
|
colorLight: '#fff'
|
})
|
})
|
},
|
print2() {
|
// 新开页面打印
|
let newStr = document.getElementById('printMe1').innerHTML;
|
let newWin = window.open('', '_blank');
|
newWin.document.body.innerHTML = newStr;
|
newWin.print();
|
return false;
|
},
|
print3() {
|
// 新开页面打印
|
let newStr = document.getElementById('printMe2').innerHTML;
|
let newWin = window.open('', '_blank');
|
newWin.document.body.innerHTML = newStr;
|
newWin.print();
|
return false;
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.outerDiv {
|
width: fit-content;
|
min-width: 100%;
|
/*width: 300px;*/
|
height: 50px;
|
margin-bottom: 10px;
|
}
|
|
.innerDiv1 {
|
/*width: 79%;*/
|
height: 100%;
|
display: flex;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.innerDiv2 {
|
/*width: 20%;*/
|
width: 50px;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px solid black;
|
}
|
|
.content_left {
|
font-weight: bold;
|
}
|
.content_right {
|
white-space: nowrap;
|
padding-left: 5px;
|
padding-right: 5px;
|
}
|
.container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100px; /* 设置div的高度，可根据实际情况调整 */
|
}
|
|
.centered {
|
text-align: center;
|
}
|
|
</style>
|
