web-dev-qa-db-fra.com

Utilisation de JQuery pour ouvrir une fenêtre contextuelle et imprimer

Il y a quelque temps, j'ai créé un plugin lightbox utilisant jQuery qui chargerait une URL spécifiée dans un lien dans une lightbox. Le code est vraiment simple:

$('.readmore').each(function(i){
    $(this).popup();
});

et le lien ressemblerait à ceci:

<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>

Le plugin pourrait également accepter des arguments pour la largeur, la hauteur, une URL différente et plus de données à traverser.

Le problème auquel je suis confronté en ce moment est l'impression de la lightbox. Je l'ai configuré pour que la lightbox ait un bouton d'impression en haut de la boîte. Ce lien ouvrirait une nouvelle fenêtre et l'imprimerait. Tout cela est contrôlé par le plugin lightbox. Voici à quoi ressemble ce code:

$('.printBtn').bind('click',function() {
    var url = options.url + ( ( options.url.indexOf('?') < 0 && options.data != "" ) ? '?' : '&' ) + options.data;
    var thePopup = window.open( url, "Member Listing", "menubar=0,location=0,height=700,width=700" );
    thePopup.print();
});

Le problème est que le script ne semble pas attendre le chargement de la fenêtre. Il veut imprimer au moment où la fenêtre apparaît. Par conséquent, si je clique sur "Annuler" dans la boîte de dialogue d'impression, il apparaîtra encore et encore jusqu'à ce que la fenêtre se charge. La première fois que j'ai essayé d'imprimer, j'ai eu une page vierge. Cela peut être dû au fait que la fenêtre n'a pas terminé le chargement.

Je dois trouver un moyen de modifier le bloc de code précédent pour attendre que la fenêtre se charge, puis imprimer. Je pense qu'il devrait y avoir un moyen facile de le faire, mais je ne l'ai pas encore trouvé. Soit cela, soit je dois trouver un meilleur moyen d'ouvrir une fenêtre contextuelle et d'imprimer à partir du script lightbox dans la fenêtre parent, sans alterner le code de la page Web dans la fenêtre contextuelle.

javascriptjqueryprintingpopuplightbox
14
TJ Kirchner

Vous devez placer la fonction d'impression dans votre fichier view-details.php et l'appeler une fois le fichier chargé, soit en utilisant

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

ou

$(document).ready(function () { 
  window.print(); 
});
28
Ivo Sabev

Je l'ai! J'ai trouvé une idée ici

http://www.mail-archive.com/[email protected]/msg18410.html

Dans cet exemple, ils ont chargé une fenêtre contextuelle vide dans un objet, cloné le contenu de l'élément à afficher et l'ajouté au corps de l'objet. Comme je connaissais déjà le contenu des détails de la vue (ou de toute page que je charge dans la lightbox), je devais simplement cloner ce contenu à la place et le charger dans un objet. Ensuite, j'avais juste besoin d'imprimer cet objet. Le résultat final ressemble à ceci:

$('.printBtn').bind('click',function() {
    var thePopup = window.open( '', "Customer Listing", "menubar=0,location=0,height=700,width=700" );
    $('#popup-content').clone().appendTo( thePopup.document.body );
    thePopup.print();
});

J'avais un petit inconvénient en ce que la feuille de style que j'utilisais dans view-details.php utilisait un lien relatif. J'ai dû le changer en un lien absolu. La raison étant que la fenêtre n'avait pas d'URL associée, elle n'avait donc aucune position relative sur laquelle s'appuyer.

Fonctionne dans Firefox. Je dois également le tester dans certains autres principaux navigateurs.

Je ne sais pas si cette solution fonctionne bien lorsque vous traitez avec des images, des vidéos ou d'autres solutions à forte intensité de processus. Bien que cela fonctionne assez bien dans mon cas, car je ne fais que charger des tableaux et des valeurs de texte.

Merci pour la contribution! Vous m'avez donné quelques idées pour contourner cela.

7
TJ Kirchner

Êtes-vous sûr de ne pas pouvoir modifier le code HTML dans la fenêtre contextuelle?

Si vous le pouvez, ajoutez une balise <script> À la fin du code HTML de la fenêtre contextuelle et appelez window.print() à l'intérieur. Ensuite, il ne sera pas appelé avant le chargement du code HTML.

0
Stuart Sierra