Question

我想打开一个新窗口/标签，在文档中放入一些HTML，然后调出浏览器打印对话框以打印该新窗口。我使用以下内容来完成此任务：

var w = window.open();
w.document.write(html);
w.document.close();
w.focus();
w.print();
w.close();

HTML ：

<body>
  <img src='url1' />
  <img src='url2' />
  <img src='urln' />
</body>

这一切都有效，窗口弹出，并显示新页面的打印对话框并打印所有图像。但是，由于某些原因，某些图像正在打印，而是打印图像alt消息。

有很多图像，它们是在服务器端动态生成的（每个图像加载大约需要1秒钟）。

确保加载和打印所有图像需要做些什么？

这种情况发生在我已经确认的IE和Firefox中。我感谢任何帮助。

Answer 1

尝试使用JS library that detect when images have been loaded。

你可以像这样使用它：

<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
  imagesLoaded(document.body, function() {
    window.print();
  });
</script>

Answer 2

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <title>Print Images</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <style type="text/css">
    body, div, v\:image{
        text-align: center;
        margin: 0px;
        padding: 0px;
    }
    div{
        page-break-after:always;
    }
    v\:image{
        behavior: url(#default#VML);
        display: block;
        width: 1078px;
        height: 1527px;
    }
    </style>
    <script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = $("td:[id^='tdImg']", window.opener.document);
            for(var i = 0; i < data.length; i++){
                var image = $("<image/>");
                image.load(data.length, function(event){
                    try{
                        $("body").append($("<div/>").append($("<v\:image/>").attr("src", $(this).attr("src"))));
                        if($("body").find("v\\:image").length == event.data){
                            window.print();
                            window.close();
                        }
                    }catch(e){
                        alert(e.message);
                    }finally{
                        $(this).unbind("error");
                        $(this).unbind("load");
                        $(this).remove();
                    }
                });
                image.attr("src", data.eq(i).attr("data-url"));
            }
        });
    </script>
</head>
<body></body>
</html>

Answer 3

    <!DOCTYPE html>
    <html>
    <head>
        <title>Print Images</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <style type="text/css">
        body, div, image{
            text-align: center;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
        </style>
        <script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = $("td:[id^='tdImg']", window.opener.document);
                for(var i = 0; i < data.length; i++){
                    var image = $("<image/>");
                    image.load(data.length, function(event){
                        try{
                            var c = $("<canvas />");
                            c.get(0).width = $(this).get(0).naturalWidth;
                            c.get(0).height = $(this).get(0).naturalHeight;
                            var cxt = c.get(0).getContext("2d");
                            cxt.drawImage($(this).get(0), 0, 0);
                            var base64Code = c.get(0).toDataURL("image/png");
                            c.remove();
                            $("body").append($("<div/>").append($("<image/>").attr("src", base64Code)));
                            if($("body").find("image").length == event.data){
                                window.print();
                                window.close();
                            }                                           
                        }catch(e){
                            alert(e.message);
                        }finally{
                            $(this).unbind("error");
                            $(this).unbind("load");
                            $(this).remove();
                        }
                    });
                    image.attr("src", data.eq(i).attr("data-url"));
                }
            });
        </script>
    </head>
    <body></body>
    </html>

打印时缺少图像

3 个答案: