vue項目中批量打印二維碼


前提:項目中要打印的二維碼為后台返回,批量選擇后,點擊打印,先打開二維碼預覽界面,再執行打印。

以下代碼中 codePicList為選中的二維碼數組。
重點css:page-break-after:always 在元素后插入分頁符;
在打印時,要分頁(需求是每個二維碼打印在一張紙上)
// 此代碼為瀏覽界面遍歷出來的要打印的多個二維碼
<ul id="codeImgviewer" v-if="codePicList != null && codePicList.length != 0"> <li v-for="(item,index) in codePicList" v-bind:key="index" style="cursor:pointer; padding:10px;float:left"> <div :id="'codeimg' + index" style="page-break-after:always;"> <img :src="item" style="width:260px;height:130px;" @click="showBigImg('codeImgviewer')" /> </div> </li> </ul>
 //打印二維碼
    printCode() {
      if (this.codePicList == null || this.codePicList.length == 0) {
        return;
      }
      var newWin = window.open(""); //新打開一個空窗口
      for (var i = 0; i < this.codePicList.length; i++) {
        var imageToPrint = document.getElementById("codeimg" + i); //將要被打印的圖片
        newWin.document.write(imageToPrint.outerHTML); //將圖片添加進新的窗口
      }
      newWin.document.close(); //在IE瀏覽器中使用必須添加這一句
      newWin.focus(); //在IE瀏覽器中使用必須添加這一句
      setTimeout(function() {
        newWin.print(); //打印
        newWin.close(); //關閉窗口
      }, 100);
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM