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

以下代碼中 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);},

?

轉載于:https://www.cnblogs.com/ss977/p/10120651.html

總結

以上是生活随笔為你收集整理的vue项目中批量打印二维码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。