vue 打印分頁踩坑。
之前自己做了一個生成二維碼並且打印的功能。核心代碼：
<div class="el-dialog__body_qrcode">
<div id="imgQRCode" media="print" class="img-wrap">
<div v-for="(state,index) in base64URL" :key="index" class="aaaaaaaa" style="page-break-after:always">
<div class="img_border">
<img :src="URL+state.Qrcode" class="img_qrcode"/>
<div class="Qrcode_img_font">{{"出廠編號："+state.NewName}}
</div>
<img :src="URL+state.AddPicture" class="img_picture"/>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{$t("BUTTON_CANCEL")}}</el-button>
<el-button type="primary" @click="printQRcode">{{$t("BUTTON_PRINTQRCODE")}}</el-button>
</div>
printQRcode() {
var bdhtml = window.document.body.innerHTML;
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var el = document.getElementById("imgQRCode");
var newstr = el.innerHTML;
window.document.body.innerHTML = headstr + newstr + footstr;//把需要打印的指定內容賦給body.innerHTM
window.print(); //調用瀏覽器的打印功能打印指定區域
window.location.reload();
window.document.body.innerHTML = bdhtml; //重新給頁面內容賦
},
代碼和樣式一直沒變過。
后來前端升級了架構，發現打印分頁只會顯示第一個。
最后找到了原因。前端升級架構給最外層的index.html加了一個樣式：
沒錯。因為window.document.body.innerHTML會自己找到當前窗口樣式。overflow-y：hidden會使
page-break-after:always不生效。