web-dev-qa-db-fra.com

Fermer la fenêtre automatiquement après la fermeture de la boîte de dialogue d'impression

J'ai un onglet ouvert lorsque l'utilisateur clique sur un bouton. Sur la onload je l’affiche, la boîte de dialogue d’impression apparaît, mais l’utilisateur m’a demandé s’il était possible qu’après l’envoi à l’imprimante pour imprimer, si l’onglet pouvait se fermer tout seul. Je ne suis pas sûr si cela peut être fait. J'ai essayé d'utiliser setTimeout();, mais ce n'est pas une période de temps définie car l'utilisateur risque de se laisser distraire et de devoir rouvrir l'onglet. Est-il possible d'accomplir cela?

66
Tsundoku

si vous essayez de fermer la fenêtre juste après l'appel de print (), il se peut que la fenêtre se ferme immédiatement et que print () ne fonctionnera pas. C'est ce que vous ne devriez pas faire:

window.open();
...
window.print();
window.close();

Cette solution fonctionnera dans Firefox, car lors d’un appel à print (), elle attendra que l’impression soit terminée, puis elle continuera à traiter javascript et à fermer () la fenêtre . IE échouera car elle appelle la fonction close () sans l'attente de l'appel print () est terminée. La fenêtre contextuelle sera fermée avant la fin de l'impression.

Une façon de le résoudre consiste à utiliser l'événement "onafterprint" mais je ne vous le recommande pas car ces événements ne fonctionnent que dans IE. 

La meilleure façon ferme la fenêtre contextuelle une fois la boîte de dialogue d'impression fermée (l'impression est terminée ou annulée). A ce moment, la fenêtre contextuelle sera focalisée et vous pourrez utiliser l'événement "onfocus" pour fermer la fenêtre contextuelle.

Pour ce faire, insérez simplement ce code JavaScript intégré dans votre fenêtre contextuelle:

<script type="text/javascript">
window.print();
window.onfocus=function(){ window.close();}
</script>

J'espère que ça va ;-)

Mettre à jour: 

Pour les nouveaux navigateurs Chrome, il se peut qu’il ferme encore trop tôt voir ici . J'ai implémenté ce changement et cela fonctionne pour tous les navigateurs actuels: 29/02/16

        setTimeout(function () { window.print(); }, 500);
        window.onfocus = function () { setTimeout(function () { window.close(); }, 500); }
102
serfer2

C'est ce que j'ai proposé, je ne sais pas pourquoi il y a un petit délai avant la fermeture.

 window.print();
 setTimeout(window.close, 0);
67
noamtcohen

Juste:

window.print();
window.close();

Ça marche.

14
Ying Style

Je veux juste écrire ce que j'ai fait et ce qui a fonctionné pour moi (comme rien d'autre que j'ai essayé n'a fonctionné).

J'ai eu le problème que IE fermait les fenêtres avant que la boîte de dialogue d'impression ne se lève.

Après beaucoup d'essais et d'erreurs, voici ce que j'ai à faire:

var w = window.open();
w.document.write($('#data').html()); //only part of the page to print, using jquery
w.document.close(); //this seems to be the thing doing the trick
w.focus();
w.print();
w.close();

Cela semble fonctionner dans tous les navigateurs.

11
Holger

Ce code a parfaitement fonctionné pour moi:

<body onload="window.print()" onfocus="window.close()">

Lorsque la page s'ouvre, la boîte de dialogue d'impression s'ouvre automatiquement et après l'impression ou l'annulation, la fenêtre se ferme.

J'espère que ça aide,

10
Victor Olaru

À l’aide de Chrome, j’ai essayé pendant un moment de faire fonctionner la window.onfocus=function() { window.close(); } et la <body ... onfocus="window.close()"> Mes résultats: 

  1. J'avais fermé mon dialogue d'impression, rien ne s'est passé.
  2. J'ai changé de fenêtre/onglets dans mon navigateur, toujours rien.
  3. est revenu à ma première fenêtre/onglet puis l’événement window.onfocus a été déclenché en fermant la fenêtre.

J'ai également essayé <body onload="window.print(); window.close()" >, ce qui a entraîné la fermeture de la fenêtre avant même que je ne puisse cliquer sur quoi que ce soit dans le dialogue d'impression. 

Je ne pouvais utiliser ni l'un ni l'autre… .. J'ai donc utilisé un peu de Jquery pour surveiller l'état du document et ce code fonctionne pour moi.

<script type="text/javascript">
    var document_focus = false; // var we use to monitor document focused status.
    // Now our event handlers.
    $(document).focus(function() { document_focus = true; });
    $(document).ready(function() { window.print(); });
    setInterval(function() { if (document_focus === true) { window.close(); }  }, 500);
</script>

Assurez-vous simplement que vous avez inclus jquery, puis copiez/collez cela dans le code HTML que vous imprimez. Si l'utilisateur a imprimé, enregistré sous le format PDF ou annulé le travail d'impression, la fenêtre/l'onglet s'autodétruira automatiquement. Remarque: je l'ai seulement testé en chrome.

Modifier

Comme Jypsy l’a souligné dans les commentaires, l’état de focus du document n’est pas nécessaire. Vous pouvez simplement utiliser la réponse de noamtcohen, j'ai changé mon code pour cela et cela fonctionne.

7
Nado11

Il s'agit d'une solution multi-navigateurs déjà testée sur Chrome, Firefox, Opera d'ici 2016/05.

N'oubliez pas que Microsoft Edge a un bogue qui ne ferme pas la fenêtre si l'impression était annulée. Lien connexe

var url = 'http://...';
var printWindow = window.open(url, '_blank');
printWindow.onload = function() {
    var isIE = /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);
    if (isIE) {

        printWindow.print();
        setTimeout(function () { printWindow.close(); }, 100);

    } else {

        setTimeout(function () {
            printWindow.print();
            var ival = setInterval(function() {
                printWindow.close();
                clearInterval(ival);
            }, 200);
        }, 500);
    }
}
7
Heroselohim

Ce qui suit a fonctionné pour moi:

function print_link(link) {
    var mywindow = window.open(link, 'title', 'height=500,width=500');   
    mywindow.onload = function() { mywindow.print(); mywindow.close(); }
}
4
Abu shoaib

Cela fonctionne bien dans Chrome 59:

window.print();
window.onmousemove = function() {
  window.close();
}
3
maxhud

La solution suivante fonctionne pour les versions plus récentes de IE9, IE8, Chrome et FF à compter du 2014-03-10 . Le scénario est le suivant: vous êtes dans une fenêtre (A), dans laquelle vous cliquez sur un bouton/lien pour lancer le programme. Lors du processus d’impression, une nouvelle fenêtre (B) contenant le contenu à imprimer s’ouvre. La boîte de dialogue d’impression s’affiche immédiatement. Vous pouvez soit annuler, soit imprimer. La nouvelle fenêtre (B) se ferme automatiquement.

Le code suivant permet cela. Ce code javascript doit être placé dans le code HTML pour la fenêtre A (pas pour la fenêtre B):

/**
 * Opens a new window for the given URL, to print its contents. Then closes the window.
 */
function openPrintWindow(url, name, specs) {
  var printWindow = window.open(url, name, specs);
    var printAndClose = function() {
        if (printWindow.document.readyState == 'complete') {
            clearInterval(sched);
            printWindow.print();
            printWindow.close();
        }
    }
    var sched = setInterval(printAndClose, 200);
};

Le bouton/lien pour lancer le processus doit simplement appeler cette fonction, comme dans:

openPrintWindow('http://www.google.com', 'windowTitle', 'width=820,height=600');
3
Juan Manuel Perez

celui-ci fonctionne pour moi:

<script>window.onload= function () { window.print();window.close();   }  </script>
3
arun.m

Cela fonctionnait mieux pour moi en injectant le code HTML dans la fenêtre contextuelle, tel que <body onload="window.print()"... Ce qui précède fonctionne pour IE, Chrome et FF (sur Mac) mais pas en FF sous Windows. 

https://stackoverflow.com/a/11782214/1322092

var html = '<html><head><title></title>'+
               '<link rel="stylesheet" href="css/mycss.css" type="text/css" />'+
               '</head><body onload="window.focus(); window.print(); window.close()">'+
               data+
               '</body></html>';
1
user1322092

Voici ce que je fais ....

Activer la fenêtre pour imprimer et se fermer elle-même en fonction d'un paramètre de requête.

Nécessite jQuery. Peut être fait en _Layout ou en maquette pour fonctionner avec toutes les pages.

L'idée est de passer un paramètre dans l'URL indiquant à la page d'imprimer et de fermer. Si le paramètre est défini, l'événement "prêt" jQuery imprime la fenêtre, puis lorsque la page est entièrement chargée (après l'impression), le "chargement" est appelé qui ferme la fenêtre. Toutes ces étapes apparemment supplémentaires consistent à attendre que la fenêtre s’imprime avant de se fermer. 

Dans le corps html, ajoutez et événement onload qui appelle printAndCloseOnLoad (). Dans cet exemple, nous utilisons cshtm, vous pouvez également utiliser javascript pour obtenir les paramètres.

<body onload="sccPrintAndCloseOnLoad('@Request.QueryString["PrintAndClose"]');">

Dans le javascript, ajoutez la fonction.

function printAndCloseOnLoad(printAndClose) {
    if (printAndClose) {
        // close self without prompting
        window.open('', '_self', ''); window.close();
    }
}

Et événement prêt jQuery.

$(document).ready(function () {
    if (window.location.search.indexOf("PrintAndClose=") > 0)
        print();
});

Maintenant, lorsque vous ouvrez une URL, ajoutez simplement le paramètre de chaîne de requête «PrintAndClose = true», qui sera imprimé et fermé.

1
RitchieD
<!doctype html>
<html>
<script>
 window.print();
 </script>
<?php   
date_default_timezone_set('Asia/Kolkata');
include 'db.php'; 
$tot=0; 
$id=$_GET['id'];
    $sqlinv="SELECT * FROM `sellform` WHERE `id`='$id' ";
    $resinv=mysqli_query($conn,$sqlinv);
    $rowinv=mysqli_fetch_array($resinv);
?>
        <table width="100%">
           <tr>
                <td style='text-align:center;font-sie:1px'>Veg/NonVeg</td>  
            </tr>
            <tr>
                <th style='text-align:center;font-sie:4px'><b>HARYALI<b></th>  
            </tr>   
            <tr>
                <td style='text-align:center;font-sie:1px'>Ac/NonAC</td>  
            </tr>
            <tr>
                <td style='text-align:center;font-sie:1px'>B S Yedurappa Marg,Near Junne Belgaon Naka,P B Road,Belgaum - 590003</td>  
            </tr>
        </table>
        <br>    
        <table width="100%">
           <tr>
                <td style='text-align:center;font-sie:1'>-----------------------------------------------</td>  
            </tr>
        </table>

        <table  width="100%" cellspacing='6' cellpadding='0'>

            <tr>
                <th style='text-align:center;font-sie:1px'>ITEM</th>
                <th style='text-align:center;font-sie:1px'>QTY</th>
                <th style='text-align:center;font-sie:1px'>RATE</th>
                <th style='text-align:center;font-sie:1px'>PRICE</th>
                <th style='text-align:center;font-sie:1px' >TOTAL</th>
            </tr>

            <?php
            $sqlitems="SELECT * FROM `sellitems` WHERE `invoice`='$rowinv[0]'";
            $resitems=mysqli_query($conn,$sqlitems);
            while($rowitems=mysqli_fetch_array($resitems)){
            $sqlitems1="SELECT iname FROM `itemmaster` where icode='$rowitems[2]'";
            $resitems1=mysqli_query($conn,$sqlitems1);
            $rowitems1=mysqli_fetch_array($resitems1);
            echo "<tr>
                <td style='text-align:center;font-sie:3px'  >$rowitems1[0]</td>
                <td style='text-align:center;font-sie:3px' >$rowitems[5]</td>
                <td style='text-align:center;font-sie:3px' >".number_format($rowitems[4],2)."</td>
                <td style='text-align:center;font-sie:3px' >".number_format($rowitems[6],2)."</td>
                <td style='text-align:center;font-sie:3px' >".number_format($rowitems[7],2)."</td>
              </tr>";
                $tot=$tot+$rowitems[7];
            }

            echo "<tr>
                <th style='text-align:right;font-sie:1px' colspan='4'>GRAND TOTAL</th>
                <th style='text-align:center;font-sie:1px' >".number_format($tot,2)."</th>
                </tr>";
            ?>
        </table>
     <table width="100%">
           <tr>
                <td style='text-align:center;font-sie:1px'>-----------------------------------------------</td>  
            </tr>
        </table>
        <br>
        <table width="100%">
            <tr>
                <th style='text-align:center;font-sie:1px'>Thank you Visit Again</th>  
            </tr>
        </table>
<script>
window.close();
</script>
</html>

Imprimer et fermer un nouvel onglet avec php et javascript en un seul clic

1
Abhinandan Budavi

C'est ce qui a fonctionné pour moi (2018/02). J'avais besoin d'une demande séparée car mon impression ne s'affiche pas encore à l'écran. D'après certaines des excellentes réponses ci-dessus, pour lesquelles je vous remercie tous, j'ai remarqué:

  • w.onload doit pas être défini avant w.document.write(data).
    Cela semble étrange parce que vous voudriez installer le crochet à l’avance. Mon hypothèse: le crochet est déjà déclenché lors de l'ouverture de la fenêtre sans contenu. Comme il a été tiré, il ne tirera plus. Mais, quand il y a encore un traitement en cours avec un nouveau document.write(), le hook sera appelé une fois le traitement terminé. 
  • w.document.close() est toujours requis. Sinon rien ne se passe. 

J'ai testé cela dans Chrome 64.0, IE11 (11.248), Edge 41.16299 (edgeHTML 16.16299), FF 58.0.1. Ils vont se plaindre des popups, mais ça s'imprime. 

function on_request_print() {
  $.get('/some/page.html')
    .done(function(data) {
      console.log('data ready ' + data.length);
      var w = window.open();
      w.document.write(data);
      w.onload = function() {
        console.log('on.load fired')
        w.focus();
        w.print();
        w.close();
      }
      console.log('written data')
      //this seems to be the thing doing the trick
      w.document.close();
      console.log('document closed')
    })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<a onclick="on_request_print();">Print rapportage</a>
1
Remco
const printHtml = async (html) => {
    const printable = window.open('', '_blank', 'fullscreen=no');
    printable.document.open();
    printable.document.write(`<html><body onload="window.print()">${html}</body></html>`);
    await printable.print();
    printable.close();
};

Voici ma solution ES2016.

1
Stuart

Pour moi, ma solution finale a été un mélange de plusieurs réponses:

    var newWindow = window.open();
    newWindow.document.open();
    newWindow.document.write('<html><link rel="stylesheet" href="css/normalize-3.0.2.css" type="text/css" />'
            + '<link rel="stylesheet" href="css/default.css" type="text/css" />'
            + '<link rel="stylesheet" media="print" href="css/print.css" type="text/css" />');

    newWindow.document.write('<body onload="window.print();" onfocus="window.setTimeout(function() { window.close(); }, 100);">');
    newWindow.document.write(document.getElementById(<ID>).innerHTML);
    newWindow.document.write('</body></html>');
    newWindow.document.close();
    newWindow.focus();
0
Felipe

Cela fonctionne pour moi sur Chrome (je n'ai pas essayé sur d'autres)

$(function(){
    window.print();
    $("body").hover(function(){
        window.close();
    });
});
0
emmmm

essaye ça:

var xxx = window.open("","Printing...");
xxx.onload = function () {
     setTimeout(function(){xxx.print();}, 500);
     xxx.onfocus = function () {
        xxx.close();
     }  
}
0
Sugeng Novianto

Il est très pénible de voir des choses comme celle-là fonctionner avec les navigateurs.

Au départ, je cherchais à faire le même genre de choses: ouvrir une nouvelle page avec un style d'impression, l'imprimer avec JS, puis la refermer. C'était un cauchemar.

En fin de compte, j’ai choisi de cliquer simplement sur la page imprimable, puis d’utiliser le JS ci-dessous pour lancer une impression, puis de me rediriger vers la position souhaitée (avec une variable définie dans PHP de exemple).

J'ai testé cela sur Chrome et Firefox sous OSX et Windows, ainsi que sur IE11-8, et cela fonctionne sur tous (même si IE8 se fige un peu si aucune imprimante n'est réellement installée).

Bonne chasse (impression).

<script type="text/javascript">

   window.print(); //this triggers the print

   setTimeout("closePrintView()", 3000); //delay required for IE to realise what's going on

   window.onafterprint = closePrintView(); //this is the thing that makes it work i

   function closePrintView() { //this function simply runs something you want it to do

      document.location.href = "'.$referralurl.'"; //in this instance, I'm doing a re-direct

   }

</script>
0
boboshady

Cela a fonctionné pour moi dans FF 36, Chrome 41 et IE 11. Même si vous annulez l'impression et même si vous avez fermé la boîte de dialogue d'impression avec le "X" en haut à droite.

var newWindow=window.open(); 
newWindow.document.open();
newWindow.document.write('<HTML><BODY>Hi!</BODY></HTML>'); //add your content
newWindow.document.close();
newWindow.print();      

newWindow.onload = function(e){ newWindow.close(); }; //works in IE & FF but not chrome 

//adding script to new document below makes it work in chrome 
//but alone it sometimes failed in FF
//using both methods together works in all 3 browsers
var script   = newWindow.document.createElement("script");
script.type  = "text/javascript";
script.text  = "window.close();";
newWindow.document.body.appendChild(script);
0
James Bell

Cela fonctionne parfaitement pour moi @holger, cependant, je l’ai modifié et me convient mieux; la fenêtre s’ouvre et se ferme immédiatement lorsque vous appuyez sur le bouton d’impression ou d’annulation.

function printcontent()
{ 
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
disp_setting+="scrollbars=yes,width=300, height=350, left=50, top=25"; 
var content_vlue = document.getElementById("content").innerHTML; 
var w = window.open("","", disp_setting);
w.document.write(content_vlue); //only part of the page to print, using jquery
w.document.close(); //this seems to be the thing doing the trick
w.focus();
w.print();
w.close();
}"
0

IE a (a?) Les événements onbeforeprint et onafterprint: vous pouvez attendre, mais cela ne fonctionne que sur IE (ce qui peut être correct ou non).

Vous pouvez également essayer d'attendre que le focus revienne à la fenêtre à partir de la boîte de dialogue Imprimer et la fermer. Amazon Web Services procède de la sorte dans les boîtes de dialogue d'impression des factures: vous cliquez sur le bouton d'impression, il ouvre la vue imprimable et ouvre immédiatement la boîte de dialogue de l'imprimante. Si vous appuyez sur print ou annuler, la boîte de dialogue d'impression se ferme et la vue imprimable se ferme immédiatement.

0
Femi

Sur IE11, l'événement onfocus est appelé deux fois. Par conséquent, l'utilisateur est invité deux fois à fermer la fenêtre. Cela peut être évité par un léger changement:

<script type="text/javascript">
  var isClosed = false;
  window.print();
  window.onfocus = function() {
    if(isClosed) { // Work around IE11 calling window.close twice
      return;
    }
    window.close();
    isClosed = true;
  }
</script>
0
Jakob Kofoed Janot

J'ai essayé ça et ça marche

var popupWin = window.open('', 'PrintWindow', 
'width=650,height=650,location=no,left=200px');
popupWin.document.write(data[0].xmldata);
popupWin.print();
popupWin.close();
0
user13548

simple ajouter:

<html>
<body onload="print(); close();">
</body>
</html>
0

Bien sûr, cela est facilement résolu en faisant:

  <script type="text/javascript">
     window.print();
     window.onafterprint = window.close;
  </script>
0
Samuel Bie

juste utiliser ce script Java

 function PrintDiv() {
    var divContents = document.getElementById("ReportDiv").innerHTML;
    var printWindow = window.open('', '', 'height=200,width=400');
    printWindow.document.write('</head><body >');
    printWindow.document.write(divContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
    printWindow.close();
}

il fermera la fenêtre après avoir cliquer sur le bouton soumettre ou annuler

0
user3373573
setTimeout(function () { window.print(); }, 500);
        window.onfocus = function () { setTimeout(function () { window.close(); }, 500); }

Cela fonctionne parfaitement pour moi . J'espère que ça aide

0
Klajdi Dosti

Je suppose que le meilleur moyen est de attendre pour que le document (DOM) soit chargé correctement puis utilise les fonctions d'impression et de fermeture. Je l’emballe dans la fonction Document Ready (jQuery):

<script>
$(document).ready(function () {
window.print();
window.close();
});
</script>

Il convient de noter que ce qui précède est placé sur ma "page imprimable" (vous pouvez l’appeler "printable.html" que je lie à partir d'une autre page (appelez-le linkpage.html si tu veux):

<script>
function openNewPrintWindow(){
var newWindow=window.open('http://printable.html'); //replace with your url
newWindow.focus(); //Sets focus window
}
</script>

Et pour le développeur copier-coller qui recherche simplement une solution, voici le "déclencheur" de la fonction ci-dessus (même page):

<button onclick="openNewPrintWindow()">Print</button>

Alors ça va

  1. Ouvrez une nouvelle fenêtre lorsque vous cliquez sur Imprimer
  2. Déclenche le dialogue d'impression (navigateur) après le chargement de la page
  3. Ferme la fenêtre après impression (ou annulation).

J'espère que tu t'amuses!

0
Rbbn