iframe 打印-爱代码爱编程
1、iframe打印 一定要注意样式,有些大图片打印会空白
2、iframe 设置innerHTML 和打印print 一定要有间隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button onclick="onPrint()"> print</button>
</div>
<iframe title="print" id="iframe_print" style="display: none;"></iframe>
<div id="print_img">
<img src="https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
</div>
</body>
<script>
function onPrint() {
let iframe_print = document.getElementById('iframe_print')
doc = iframe_print.contentWindow.document;
doc.head.innerHTML = '<style>@media print {html,body {height: 100vh; margin: 0 !important;padding: 0 !important}}</style>'
doc.body.innerHTML = document.getElementById('print_img').innerHTML
// 定时时间过短会影响iframe渲染,从而导致打印
setTimeout(() => {
iframe_print.contentWindow.print()
}, 1000)
}
</script>
</html>