js打印页面图片(批量)

最新推荐文章于 2024-06-17 21:52:03 发布

qq_42208679

最新推荐文章于 2024-06-17 21:52:03 发布

阅读量2.5k

点赞数

文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/qq_42208679/article/details/120827657

版权

本文介绍了一种使用JavaScript批量打印页面中图片的方法。通过创建IFRAME并在其中加载包含多个图片的HTML内容，然后利用onload事件处理函数确保所有图片加载完毕后调用打印功能。这种方法适用于需要一次性打印多张相同图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()
	}