web-dev-qa-db-fra.com

Utiliser javascript pour imprimer des images

J'aimerais savoir s'il est possible d'utiliser javascript pour ouvrir une fenêtre contextuelle contenant une image tout en affichant la boîte de dialogue Imprimer. Une fois que quelqu'un clique sur imprimer, la fenêtre se ferme.

Est-ce facilement réalisable?

javascriptimagepopupprinting
14
andrew
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
22
Javier Parra

Une autre bonne solution !! Tous les crédits vont à Codescratcher

<script>

    function ImagetoPrint(source)
    {
        return "<html><head><script>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)
    {
        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>

Voir l'exemple complet ici .

18
ricardo_escovar

Utilisez ceci dans le bloc de la tête

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

utiliser ceci dans le bloc du corps

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

Ce code ouvrira YOUR_IMAGE_URL dans une fenêtre contextuelle, affichera la boîte de dialogue d'impression et fermera la fenêtre contextuelle après l'impression.

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();

Code de référence MDN

4
Igor Jerosimić

Oui, il suffit de mettre l'image sur l'écran, puis appelez window.print(); en javascript et il devrait apparaître.

(C’est ainsi que Google Maps/Google Agenda imprime)

1
Mitch Dempsey

J'ai écrit une fonction de script de café qui fait cela (mais sans ouvrir une nouvelle fenêtre):

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

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

Ou si vous préférez en 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();
  });
};

Cette fonction vérifie que les éléments du corps sont masqués et non redessinés dans le DOM. Elle s'assure également que l'image est chargée avant d'appeler print (si l'image est trop grande et la connexion Internet lente, le chargement de l'img peut prendre un certain temps; si vous appelez print trop tôt, une page vide sera imprimée)

0
Gorodscy Fernando

Je viens de passer 45 minutes sur ce problème "SIMPLE", en essayant de le résoudre comme je le voulais.

J'avais une image dans une balise img, générée dynamiquement par un plugin jQuery Barcode que je devais imprimer. Je voulais que ce soit imprimé dans une autre fenêtre et ensuite fermé la fenêtre. Tout cela était censé se produire après que l'utilisateur a cliqué sur un bouton d'un plugin jQuery Grid, dans une boîte de dialogue jQuery-UI avec l'extension de boîte de dialogue jQuery-UI qui lui était appliquée.

J'ai ajusté les réponses de chacun jusqu'à ce que je finisse par proposer ceci, peut-être que cela peut aider quelqu'un.

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);

La setTimeout n'est pas seulement destinée aux merdes et aux rires, c'est la seule façon pour moi que Firefox 42 puisse utiliser ces fonctions. Il suffirait simplement de sauter les fonctions .close() jusqu'à ce que j'y ajoute un point d'arrêt, puis cela fonctionnait parfaitement. Je suppose donc que ces instances de fenêtre ont été créées avant de pouvoir appliquer la fonction d'événement onbeforeload et les fonctions d'événement onafterprint, ou quelque chose du genre.

0
Kickass

Cela fonctionne dans 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>
0
DD.