Forum : Bouton d'impression ne fonctionne pas

Réponse acceptée

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

popotte

Réponse acceptée

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() ^^'

popotte

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

Auteur

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

AlexandrePP

Auteur

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.

Bouton d'impression ne fonctionne pas

5 réponses