查看 | 历史 | 提交 | 提交对比
cl
2024-07-04 5b544fc8d6029a71669b3992c5cfea9a044aaf3f
提交 | 用户 | 时间
0ca254 1 <template>
A 2   <div class="app-container">
3     <el-row>
4       <el-col :span="8">
5         <div>
6           <div id="printMe">
7             <p style="margin-left: 30px">9900166410</p>
8             <p style="margin-left: 30px">HW.001.001</p>
9             <p style="margin-left: 30px">SW.001.001</p>
10             <br>
11             <br>
12             <br>
13             <br>
14             <br>
15             <span style="font-size: 20px;font-weight: bold;margin-left: 40px">GEELY</span><br>
16             <span style="font-size: 10px;margin-left: 15px">COMMERCIAL VEHICLE</span><br>
17             <span style="margin-left: 43px">H2155D</span><br>
18             <span style="margin-left: 43px">993083</span><br>
19             <span style="margin-left: 20px">9900166410</span><br>
20             <span style="font-size: 10px;margin-right: 7px">0RSPBFAA1A2E3ADC40000027</span>
21             <br>
22             <br>
23             <br>
24             <br>
25             <br>
26             <div ref="canvasWrapper" id="canvasWrapper" style="display: flex;justify-content: center;margin-top: -30px"></div>
27             <span style="font-size: 7px;word-break: break-all;display: flex;justify-content: center;">{{text1}}</span>
28           </div>
29           <el-button @click="print1">打印</el-button>
30           <el-button @click="test1">生成二维码</el-button>
31
32         </div>
33       </el-col>
34       <el-col :span="8">
35         <div>
36           <div style="text-align: center" id="printMe1">
37             <p>9900166410</p>
38             <p>HW.001.001</p>
39             <p>SW.001.001</p>
40           </div>
41           <el-button @click="print2">打印</el-button>
42         </div>
43       </el-col>
44       <el-col :span="8">
45         <div>
46           <div id="printMe2">
47             <span style="font-size: 20px;font-weight: bold;margin-left: 40px">GEELY</span><br>
48             <span style="font-size: 10px;margin-left: 15px">COMMERCIAL VEHICLE</span><br>
49             <span style="margin-left: 43px">H2155D</span><br>
50             <span style="margin-left: 43px">993083</span><br>
51             <span style="margin-left: 20px">9900166410</span><br>
52             <span style="font-size: 10px;margin-right: 7px">0RSPBFAA1A2E3ADC40000027</span>
53           </div>
54           <el-button @click="print3">打印</el-button>
55         </div>
56       </el-col>
57     </el-row>
58
59   </div>
60 </template>
61
62 <script>
63
64 import QRCode from "qrcodejs2";
65
66 export default {
67   name: "Instructions",
68   data() {
69     return {
70       text1: 'P9900166410#T0RSPBFAA1A2E3ADC40000027#V993983#SSW001.001#HHW001.001#NBMS#',
71       text2: '1234',
72       text3: '1234',
73
74
75     };
76   },
77   created() {
78   },
79   mounted() {
80     this.test1()
81   },
82   methods: {
83     print1() {
84       // 新开页面打印
85       let newStr = document.getElementById('printMe').innerHTML;
86       let newWin = window.open('', '_blank');
87       newWin.document.body.innerHTML = newStr;
88       newWin.print();
89       return false;
90     },
91     test1(){
92       document.getElementById('canvasWrapper').innerHTML = '';
93       this.$nextTick(() => {
94         let qrCode = new QRCode('canvasWrapper',{
95           width: 120,
96           height: 120,
97           text: this.text1,
98           colorDark: '#000',
99           colorLight: '#fff'
100         })
101       })
102     },
103     print2() {
104       // 新开页面打印
105       let newStr = document.getElementById('printMe1').innerHTML;
106       let newWin = window.open('', '_blank');
107       newWin.document.body.innerHTML = newStr;
108       newWin.print();
109       return false;
110     },
111     print3() {
112       // 新开页面打印
113       let newStr = document.getElementById('printMe2').innerHTML;
114       let newWin = window.open('', '_blank');
115       newWin.document.body.innerHTML = newStr;
116       newWin.print();
117       return false;
118     },
119   },
120 }
121 </script>
122
123 <style scoped>
124 .outerDiv {
125   width: fit-content;
126   min-width: 100%;
127   /*width: 300px;*/
128   height: 50px;
129   margin-bottom: 10px;
130 }
131
132 .innerDiv1 {
133   /*width: 79%;*/
134   height: 100%;
135   display: flex;
136   align-items: center;
137   border: 1px solid black;
138 }
139
140 .innerDiv2 {
141   /*width: 20%;*/
142   width: 50px;
143   height: 100%;
144   display: flex;
145   justify-content: center;
146   align-items: center;
147   border: 1px solid black;
148 }
149
150 .content_left {
151   font-weight: bold;
152 }
153 .content_right {
154   white-space: nowrap;
155   padding-left: 5px;
156   padding-right: 5px;
157 }
158 .container {
159   display: flex;
160   justify-content: center;
161   align-items: center;
162   height: 100px; /* 设置div的高度，可根据实际情况调整 */
163 }
164
165 .centered {
166   text-align: center;
167 }
168
169 </style>