iframe 打印

trifling_

已于 2023-03-08 22:16:06 修改

阅读量716

点赞数

分类专栏： web前端文章标签： html css javascript

于 2023-03-08 22:15:11 首次发布

本文链接：https://blog.csdn.net/Trifling_/article/details/129412996

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>