打印标签前端生成二维码

src/views/ecw/order/components/PrintTag.vue

@@ -27,10 +27,8 @@
                 :style="{display: index == 0 ? 'block':'none' }"
                 :key="item.num">
                 <div style="float: left; width: 28mm; border-bottom: 0.2mm solid #333; border-right: 0.2mm solid #333; " >
-                    <img :src="item.url" :alt="item.url" style="width: 26mm" />
-                    <p style=" text-align: center; height: 5mm; font-size: 3mm; -webkit-margin-before: 0em; -webkit-margin-after: 0em; margin-top: 0mm; " >
-                        {{item.tag}}
-                    </p>
+                    <img class="qrcode" src="" :alt="item.url" style="width: 26mm" />
+                    <p class="tag" style=" text-align: center; height: 5mm; font-size: 3mm; -webkit-margin-before: 0em; -webkit-margin-after: 0em; margin-top: 0mm; " >{{item.tag}}</p>
                     <p style="margin-top: -1mm; text-align: center">
                         <span style="text-align: center; font-weight: 600; font-size: 6mm" >{{item.num}}</span>
                     </p>
@@ -73,6 +71,7 @@
 import {printTag} from '@/api/ecw/order'
 import {parseTime} from '@/utils/ruoyi'
 import lodop from '@/utils/lodop'
+import QRCode from "qrcode";
 
 export default {
     filters: {parseTime},
@@ -136,12 +135,18 @@ export default {
             if(!this.printTags.length){
                 return this.$message.error(this.$t('指定区域无可打印标签'))
             }
-            this.$refs["form"].validate(valid => {
+            this.$refs["form"].validate((valid) => {
                 if (!valid) {
                     return;
                 }
                 this.currentNo = this.form.start
                 this.step = 'preview'
+                this.$nextTick(async () => {
+                    const first = document.getElementsByClassName('order-print-tag-item')[0]
+                    const tag = first.getElementsByClassName('tag')[0].innerText
+                    const qrcode = await QRCode.toDataURL(tag)
+                    first.getElementsByClassName('qrcode')[0].setAttribute("src", qrcode)
+                })
             })
         },
         print(){
@@ -152,18 +157,24 @@ export default {
             if(items.length > 1000){
                 this.$alert(this.$t('标签超过1000需要耐心等候标签生成，请稍候'))
             }
-            lodop().then(LODOP => {
+            lodop().then(async(LODOP) => {
                 LODOP.PRINT_INIT(this.title);
                 LODOP.SET_PRINT_STYLE("FontSize",18);
                 LODOP.SET_PRINT_STYLE("Bold",1);
                 // LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
-
+                console.log({items})
                 LODOP.SET_PRINT_PAGESIZE(0, 800, 600, "TAG");
-                for(let i in items){
-                    LODOP.ADD_PRINT_HTM("2mm",0,800,600, items[i].innerHTML);
+                let i = 0;
+                for(let item of items){
+                    const tag = item.getElementsByClassName('tag')[0].innerText
+                    const qrcode = await QRCode.toDataURL(tag)
+                    item.getElementsByClassName('qrcode')[0].setAttribute("src", qrcode)
+                    LODOP.ADD_PRINT_HTM("2mm",0,800,600, item.innerHTML);
+                    console.log('item.innerHTML', item.innerHTML)
                     if(i < items.length){
                         LODOP.NewPage()
                     }
+                    i++
                 }
                 LODOP.PREVIEW();