Использование JavaScript для печати изображений - PullRequest
Новая
       27

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

14 голосов
/ 26 мая 2010

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

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

Ответы [ 8 ]

22 голосов
/ 26 мая 2010 
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
20 голосов
/ 11 августа 2015

Еще одно отличное решение !! Все кредиты идут на 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>

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

8 голосов
/ 04 сентября 2012

Используйте это в головном блоке 

<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 голосов
/ 04 июня 2014

Этот код откроет 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 Ссылочный код

1 голос
/ 26 мая 2010

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

(Так печатают Карты Google / Календарь Google)

0 голосов
/ 15 июня 2018

Я написал функцию сценария кофе, которая делает это (но без открытия нового окна): 

@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 слишком рано, он напечатает пустую страницу)

0 голосов
/ 02 декабря 2015

Я только что потратил 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 или что-то в этом роде.

0 голосов
/ 30 апреля 2014

Это работает в 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>
...