Использование javascript для печати изображений

Я хотел бы узнать, можно ли использовать javascript для открытия всплывающего окна, содержащего изображение, и в то же время иметь диалоговое окно печати. Когда кто-то нажимает на печать, всплывающее окно закрывается.

Это легко достижимо?

Ответы

Ответ 1

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

Ответ 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>

Смотрите полный пример здесь.

Ответ 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()" />

Ответ 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

Ответ 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" />

Ответ 6

Да, просто поместите изображение на экран, а затем вызовите window.print(); в javascript, и он должен появиться.

(Это то, как Google Карт/Календарь Google печатает)

Ответ 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>

Ответ 8

Я просто потратил 45 минут на эту "ПРОСТОЙ" проблему, пытаясь получить ее так, как я ее хотел.

У меня было изображение внутри тега 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 или что-то в этом роде.

Ответ 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. Это также гарантирует, что изображение загружается перед вызовом print (если изображение слишком большое и интернет-соединение медленное, загрузка img может занять некоторое время, если вы вызываете print слишком рано, он напечатает пустую страницу)