Question

我想知道是否可以使用javascript打开包含图像的弹出窗口，同时显示打印对话框。一旦有人点击打印，弹出窗口就会关闭。

这容易实现吗？

Answer 1

popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();

Answer 2

另一个很棒的解决方案！所有功劳都归功于Codescratcher

<script>

    function ImagetoPrint(source)
    {
        return "<html><head><scri"+"pt>function step1(){\n" +
                "setTimeout('step2()', 10);}\n" +
                "function step2(){window.print();window.close()}\n" +
                "</scri" + "pt></head><body onload='step1()'>\n" +
                "<img src='" + source + "' /></body></html>";
    }

    function PrintImage(source)
    {
        var Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImagetoPrint(source));
        pwa.document.close();
    }

</script>

<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>

请参阅完整示例here。

Answer 3

在头部块中使用

<script type="text/javascript">
function printImg() {
  pwin = window.open(document.getElementById("mainImg").src,"_blank");
  pwin.onload = function () {window.print();}
}
</script>

在正文块中使用它

<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image"  onclick="printImg()" />

Answer 4

此代码将在弹出窗口中打开YOUR_IMAGE_URL，显示打印对话框并在打印后关闭弹出窗口。

var popup;

function closePrint () {
    if ( popup ) {
        popup.close();
    }
}

popup = window.open( YOUR_IMAGE_URL );
popup.onbeforeunload = closePrint;
popup.onafterprint = closePrint;
popup.focus(); // Required for IE
popup.print();

MDN Reference code

Answer 5

跨浏览器解决方案printImage(document.getElementById('buzzBarcode').src)

/**
 * Prints an image by temporarily opening a popup
 * @param {string} src - image source to load
 * @returns {void}
 */
function printImage(src) {
    var win = window.open('about:blank', "_new");
    win.document.open();
    win.document.write([
        '<html>',
        '   <head>',
        '   </head>',
        '   <body onload="window.print()" onafterprint="window.close()">',
        '       <img src="' + src + '"/>',
        '   </body>',
        '</html>'
    ].join(''));
    win.document.close();
}

img {
  display: block;
  margin: 10px auto;
}

button {
  font-family: tahoma;
  font-size: 12px;
  padding: 6px;
  display: block;
  margin: 0 auto;
}

<img id="buzzBarcode" src="https://barcode.orcascan.com/qrcode/buzz.png?text=to infinity and beyond" width="150" height="150" />

Answer 6

是的，只需将图片放在屏幕上，然后在javascript中调用window.print();即可弹出。

（这是谷歌地图/谷歌日历打印的方式）

Answer 7

适用于Chrome：

  <body ><img  src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">

            <script type="text/javascript">
                window.onload = function() {
                    window.print();
                    setTimeout(function() {
                        window.close();
                    }, 1);
                };
            </script>
    </body>

Answer 8

我只花了45分钟就这个＆＃34; SIMPLE＆＃34;问题，试图按照我希望它运作的方式来实现它。

我在img标签中有一个图像，由我必须打印的jQuery Barcode插件动态生成。我想让它在另一个窗口打印，然后关闭窗口。这是在用户点击jQuery Grid插件内的按钮，jQuery-UI对话框内以及应用了jQuery-UI对话框扩展程序之后发生的。

我调整了所有人的答案，直到我终于想出了这个，也许它可以帮助别人。

w = window.open(document.getElementById("UB-canvas").src);
w.onload = function () { w.print(); }
w.onbeforeunload = setTimeout(function () { w.close(); },500);
w.onafterprint = setTimeout(function () { w.close(); },500);

setTimeout不只是为了吵架和咯咯笑，它是我发现Firefox 42击中这些功能的唯一方法。它只是简单地跳过.close()函数，直到我为它添加一个断点，然后它完美地工作。所以我假设它在应用onbeforeload事件函数和onafterprint事件函数之前创建了那些窗口实例，或者其他东西。

Answer 9

我写了一个咖啡脚本函数来做到这一点（但没有打开一个新窗口）：

@print_img = (url) ->
$children = $('body').children().hide()
$img = $('<img>', src: url)
$img.appendTo('body')

$img.on 'load', ->
  window.print()
  $(this).remove()
  $children.show()

或者如果你喜欢javascript：

this.print_img = function(url) {
  var $children, $img;
  $children = $('body').children().hide();
  $img = $('<img>', {
    src: url
  });
  $img.appendTo('body');

  $img.on('load', function() {
    window.print();
    $(this).remove();
    $children.show();
  });
};

此函数确保隐藏身体上的元素，而不是重新绘制到DOM中。它还确保在调用打印之前加载图像（如果图像太大而且互联网连接速度很慢，加载img可能需要一段时间，如果过早调用打印，则会打印空白页面）

使用javascript打印图像

9 个答案: