vue3.0使用batchBarCode打印单个或当前页一维码

1. 在main.ts中导入 import JsBarcode from 'jsbarcode' //导入一维码插件 app.component('JsBarcode', JsBarcode)  

2. 单个打印

 1       <!-- 条形码 -->
 2       <el-dialog v-model="BarCodeVisible" width="60%" title="条形码" @close="closeBarCode">
 3         <div id="barcodeimg" style="text-align: center; border: solid 2px black">
 4           <img ref="barcodeRef" />
 5           <div style="font-size: 25px; font-weight: bold">{{ barCodeMessage.name }}</div>
 6         </div>
 7         <template #footer>
 8           <el-button v-has-permission="'update'" type="primary" plain @click="prinfBarCode">打印</el-button>
 9           <el-button @click="closeBarCode">关闭</el-button>
10         </template>
11       </el-dialog>

 1 //条形码格式
 2 const options = reactive({
 3   format: 'CODE128', // 格式
 4   height: 100,
 5   width: 5,
 6   fontSize: 16,
 7   background: '#ffffff',
 8   lineColor: 'black'
 9 })
10 
11 const BarCodeVisible = ref(false)
12 const barcodeRef = ref(null)
13 
14 const barCodeMessage = ref()
15 //打开条形码弹窗
16 const openBarcode = (vol?: JSON) => {
17   barCodeMessage.value = vol
18 
19   setTimeout(() => {
20     JsBarcode(barcodeRef.value, vol.id, options)
21   }, 1000)
22 
23   BarCodeVisible.value = true
24 }
25 
26 //关闭条形码弹窗
27 const closeBarCode = () => {
28   BarCodeVisible.value = false
29 }
30 
31 //打印条形码
32 const prinfBarCode = () => {
33   const printDiv = document.createElement('div') // 创建一个新的div
34   printDiv.innerHTML = document.getElementById('barcodeimg').outerHTML // 把要打印的内容放到一个新的div里
35   document.body.innerHTML = printDiv.innerHTML
36   setTimeout(() => {
37     window.print()
38     location.reload()
39   }, 500)
40 }

3. 当前页打印

 1  <!-- 当前页条形码 -->
 2       <el-dialog v-model="batchBarCodeVisible" width="60%" title="当前页条形码" @close="closeBatchBarCode">
 3         <div id="batchBarcodeimg">
 4           <div
 5             v-for="item in batchBarCodeMessage"
 6             :key="item.key"
 7             style="text-align: center; border: solid 2px black; margin-bottom: 10px"
 8           >
 9             <img ref="batchBarcodeRef" />
10             <div style="font-size: 25px; font-weight: bold">{{ item.name }}</div>
11           </div>
12         </div>
13         <template #footer>
14           <el-button v-has-permission="'update'" type="primary" plain @click="prinfBatchBarCode">打印</el-button>
15           <el-button @click="closeBatchBarCode">关闭</el-button>
16         </template>
17       </el-dialog>

 1 const batchBarCodeVisible = ref(false)
 2 const batchBarCodeMessage = ref()
 3 const batchBarcodeRef = ref(null)
 4 const BarCodeloading = ref(false)
 5 //打开批量条形码生成弹窗
 6 const openBatchBarCode = () => {
 7   if (pagination.pageSize > 30) {
 8     ElMessage.error('不能打印超过30条以上的条形码!')
 9     return
10   }
11   batchBarCodeMessage.value = dataList
12     .filter(x => x.type != 'T')
13     .map(item => {
14       return {
15         id: item.id,
16         name: item.name
17       }
18     })
19 
20   setTimeout(() => {
21     batchBarCodeMessage.value.forEach(element => {
22       JsBarcode(batchBarcodeRef.value, element.id, options)
23     })
24   }, 1000)
25 
26   BarCodeloading.value = true
27   setTimeout(() => {
28     BarCodeloading.value = false
29   }, 4000)
30 
31   batchBarCodeVisible.value = true
32 }
33 
34 //关闭弹窗
35 const closeBatchBarCode = () => {
36   batchBarCodeVisible.value = false
37 }
38 
39 //打印当前页条码
40 const prinfBatchBarCode = () => {
41   const printDiv = document.createElement('div') // 创建一个新的div
42   printDiv.innerHTML = document.getElementById('batchBarcodeimg').outerHTML // 把要打印的内容放到一个新的div里
43   document.body.innerHTML = printDiv.innerHTML
44   setTimeout(() => {
45     window.print()
46     location.reload()
47   }, 500)
48 }

注：批量打印太多有点问题

1.测试50条会导致浏览器卡死，所以做了限制

2.加载一维码有点慢，所以做了加载处理