js打印页面图片(批量)
html代码:
<body>
<button onclick="printThisWindow()">打开</button>
</body>
js代码
let list = `<div class="imgBox">`
for (var i = 0; i < 10; i++) {
//防止批量打印时打印界面重复调用
if(i == 0){
list += `<img src="https://scpic.chinaz.net/files/pic/pic9/202110/hpic4550.jpg" style="width: 842px;height: 600px;" onload="___imageLoad___()"/>`;
}else{
list += `<img src="https://scpic.chinaz.net/files/pic/pic9/202110/hpic4550.jpg" style="width: 842px;height: 600px;"/>`;
}
}
list += `</div>`
function printThisWindow() {
let iframe = document.createElement('IFRAME')
let doc = null
iframe.setAttribute('class', 'print-iframe')
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
document.body.appendChild(iframe)
doc = iframe.contentWindow.document
// 取一个不重复的方法名称,可以随机字符串
doc.___imageLoad___ = function () {
iframe.contentWindow.print()
if (navigator.userAgent.indexOf('MSIE') > 0) {
document.body.removeChild(iframe)
}
}
doc.write(`${list}`)
doc.close()
iframe.contentWindow.focus()
}