vue 标签打印，打印二维码弹框前端代码

dmr

1. 
   
2. <script lang="ts" setup>
   
3. import { ref } from 'vue'
   
4. import { printElement } from '@/utils/printUtils'
   
5. 
   
6. interface IDialogProps {
   
7.   type?: string
   
8.   title?: string
   
9.   row?: networkDeviceApi.NetworkDeviceVO[]
   
10. }
    
11. const dialogVisible = ref(false) // 弹窗的是否展示
    
12. 
    
13. const dialogProps = ref<IDialogProps>({})
    
14. 
    
15. /** 打开弹窗 */
    
16. const open = async (value) => {
    
17.   dialogVisible.value = true
    
18.   dialogProps.value = value
    
19. }
    
20. 
    
21. defineExpose({ open }) // 提供 open 方法，用于打开弹窗
    
22. </script>
    
23. 
    
24. <template>
    
25.   <div>
    
26.     <Dialog
    
27.       v-model="dialogVisible"
    
28.       width="60%"
    
29.       top="4vh"
    
30.       custom-class="custom-dialog"
    
31.       title="标签打印"
    
32.     >
    
33.       <div class="px-[0px]">
    
34.         <div class="flex justify-center mb-8">
    
35.           <el-button type="primary" class="font-bold text-lg" @click="printElement('printMe')"
    
36.             >标签打印</el-button
    
37.           >
    
38.         </div>
    
39. 
    
40.         <div id="printMe">
    
41.           <!-- 需要打印的内容 -->
    
42.           <div
    
43.             v-for="(item, index) in dialogProps.row"
    
44.             :key="index"
    
45.             style="border-top: 1px solid #f2f2f2;"
    
46.           >
    
47.             <table class="printTable" style="width: 100%">
    
48.               <tr>
    
49.                 <td>
    
50.                   <div style="width: 76mm;float: left;display: inline-block;padding-top: 3px;">
    
51.                   <div class="printTable_left" style="width: 44mm;float: left;">
    
52.                     <table class="table_text" style="width: 44mm!important;">
    
53.                       <tbody>
    
54.                       <tr>
    
55.                         <th style="width: 10mm!important;">类型:</th>
    
56.                         <td>{{ item.ciidDesc == null ? '--' : item.ciidDesc }}</td>
    
57.                       </tr>
    
58.                       <tr>
    
59.                         <th style="width: 10mm!important;">位置:</th>
    
60.                         <td>{{ item.location == null ? '--' : item.location }}</td>
    
61.                       </tr>
    
62.                       <tr>
    
63.                         <th style="width: 10mm!important;">名称:</th>
    
64.                         <td>{{ item.name == null ? '--' : item.name }}</td>
    
65.                       </tr>
    
66.                       <tr>
    
67.                         <th style="width: 10mm!important;">型号:</th>
    
68.                         <td>{{ item.modelName == null ? '--' : item.modelName }}</td
    
69.                         >
    
70.                       </tr>
    
71.                       <tr>
    
72.                         <th style="width: 10mm!important;">SN:</th>
    
73.                         <td>{{ item.serialNumber == null ? '--' : item.serialNumber }}</td>
    
74.                       </tr>
    
75.                       </tbody>
    
76.                     </table>
    
77.                   </div>
    
78.                   <div class="printTable_right" style="width: 32mm;float: left;">
    
79.                     <div style="width: 100%;text-align: center;font-weight: bold;">
    
80.                       {{
    
81.                         item.floorCode.slice(
    
82.                           item.floorCode.lastIndexOf('-') + 1,
    
83.                           item.floorCode.length
    
84.                         )
    
85.                       }}
    
86.                     </div>
    
87.                     <div style="width: 100%;text-align: center;">
    
88.                       <img :src="item.base64Img" alt="" width="100%" height="100%" />
    
89.                     </div>
    
90.                   </div>
    
91.                   </div>
    
92.                 </td>
    
93.               </tr>
    
94.             </table>
    
95.           </div>
    
96.         </div>
    
97.       </div>
    
98.     </Dialog>
    
99.   </div>
    
100. </template>
     
101. 
     
102. <style lang="scss" scoped>
     
103. .label {
     
104.   width: 50px;
     
105.   font-weight: bold;
     
106.   text-align: right;
     
107.   padding-right: 10px;
     
108.   white-space: nowrap;
     
109. }
     
110. 
     
111. :deep(.custom-dialog .el-dialog__body) {
     
112.   height: 650px;
     
113.   overflow-y: auto;
     
114. }
     
115. #printMe {
     
116.   display: block;
     
117. }
     
118. .printTable {
     
119.   display: table;
     
120.   height: 33mm;
     
121.   font-size: 13px;
     
122.   margin: 0;
     
123. }
     
124. .printTable_left {
     
125.   float: left;
     
126.   padding: 0;
     
127.   vertical-align: bottom;
     
128. }
     
129. .printTable_right {
     
130.   float: left;
     
131.   padding: 0;
     
132.   vertical-align: bottom;
     
133.   font-size: 12px;
     
134.   font-weight: bold;
     
135.   width: 32mm;
     
136.   text-align: center;
     
137. }
     
138. .table_text {
     
139.   border: none;
     
140.   line-height: 3.6mm;
     
141.   table-layout: fixed;
     
142. }
     
143. .table_text th {
     
144.   font-weight: normal;
     
145.   font-size: 12px;
     
146.   text-align: right;
     
147.   vertical-align: top;
     
148.   padding: 0;
     
149.   white-space:nowrap!important;
     
150. }
     
151. .table_text td {
     
152.   word-break: break-all;
     
153.   font-size: 12px;
     
154.   padding: 0;
     
155.   width: 34mm;
     
156. }
     
157. .codeNuber {
     
158.   width: 100%;
     
159.   text-align: center;
     
160. }
     
161. .codeImg {
     
162.   text-align: left;
     
163.   width: 33mm;
     
164.   height: 28mm;
     
165.   vertical-align: middle !important;
     
166. }
     
167. </style>
     
168. 
     

复制代码

微信扫一扫，分享更方便