Bouton d'impression ne fonctionne pas

Par AlexandrePP, il y a 4 ans

Les bases HTML/CSS

Bonjour! J'essaye d'obtenir un bouton qui ouvre grace à un lien une image et après chargement qu'il ouvre la fenetre d'impression.

Je pense avoir le code nécessaire mais pas bien organisé. Je vous remercie pour votre aide.

<p class="click-2-print"> <a href="https://www.unige.ch/iufe/files/9516/2341/3460/Capture2.PNG" target="_blank">Click here to print the map above</a> <body onload="window.print();"> </body> </p>

5 réponses

popotte, il y a 4 ans

Alors avec un peu de js ça devrait le faire

<div class="hidden"> <!-- Block invisible en display none --> <img src="https://www.unige.ch/iufe/files/9516/2341/3460/Capture2.PNG" id="printImg" /> </div> <p class="click-2-print"> <button id="printBtn" onclick="printImage">Click here to print the map above</button> </p> <script> document.getElementById("printBtn").addEventListener("click", function() { var printContents = document.getElementById('printImg'); var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; // On remplace la page par l'image à printer window.print(); // On print la page document.body.innerHTML = originalContents; // On remet en place la page originale }); </script>
AlexandrePP, il y a 4 ans

Merci pour cette réponse ! Quand je run votre code il y a des choses : Je ne peux le faire qu'une fois (Après je dois recharger la page pour pouvoir le run à nouveau) + La commande n'affiche pas l'url image choisie, à place il y a cela : https://ibb.co/3fJ27dd

popotte, il y a 4 ans

Mmmmmh :X

Comme ca ça fonctionne mieux:

<div class="hidden"> <!-- Block invisible en display none --> <div id="printImg"> <img src="https://www.unige.ch/iufe/files/9516/2341/3460/Capture2.PNG" /> </div> </div> <p class="click-2-print"> <button id="printBtn" onclick="printImage">Click here to print the map above</button> </p> <script> document.getElementById("printBtn").addEventListener("click", function() { var printContents = document.getElementById('printImg').innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; // On remplace la page par l'image à printer window.print(); // On print la page document.body.innerHTML = originalContents; // On remet en place la page originale }); </script>

Alors maintenant pour le problème qui fait qu'on puisse le faire qu'une seule fois, en vrai il faudrait plutot créer une nouvelle page, en gros comme ca

Page1:

<a target="_blank" href="http://tonsite/printPage"

Page2 (printpage):

<div id="printImg"> <img src="https://www.unige.ch/iufe/files/9516/2341/3460/Capture2.PNG" /> </div> <script> window.addEventListener("load", function() { window.print(); // On print la page window.close }); </script>

En gros ton lien ouvre une page de print dans un nouvel onglet, et cette page de print va lancer le print, puis fermer la page (un peu comme les site quand tu cliques sur un lien de telechargement ça ouvre et referme tout de suite un onglet et le dl est lancé)

AlexandrePP, il y a 4 ans

L'image est revenu dans la fenêtre d'impression, merci !

Cependnant je ne peux me permettre de fermer automatiquement cette dernière (Window.close) parce que je dois laisser le choix aux gens de pouvoir séléctionner manuellement leur imprimante.

popotte, il y a 4 ans

De rien ;)

Ah il me semblais que la fenetre l'impression restais ouverte quand la page se fermais :X Bon si ce n'est pas le cas il suffit de supprimer indow.close() ^^'