Imprimer le contenu de jquery boîte de dialogue de l'imprimante

J'ai le texte suivant jQueryUI boîte de dialogue. Comment puis-je imprimer le contenu de la boîte de dialogue? Le contenu pourrait être n'importe quel code HTML comme un tableau, une image, etc. Il y avait plusieurs réponses à cette question,cependant, ils semblent être hors de date.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

        <script>
            $(function() {
                $("#openDialog").click(function(){$("#myDialog").dialog('open')});
                $( "#myDialog" ).dialog({
                    modal: true,
                    autoOpen    : false,
                    buttons: {Ok: function() {alert('print');}}
                });
            });
        </script>
    </head>
    <body>
        <button id="openDialog">Click</button>
        <div id="myDialog" title="My Dialog">
            <p>Print this text!</p>
            <img alt="And print this image" src="myImg.png">
        </div>
    </body>
</html>

Pouvez-vous expliquer exactement ce que voulez-vous? Voulez-vous imprimer le contenu de la modale dans une autre div# ou voulez-vous imprimer votre modal p et img (ou autre) lorsque vous cliquez sur Ok bouton, une fenêtre d'alerte que je vois dans le code?

InformationsquelleAutor user1032531 | 2014-01-08

J'ai développé mon propre plugin avec le code est ci-dessous, et un exemple vivant est situé à http://jsfiddle.net/fyu4P/embedded/result/.

Sur FF 26.0, il fonctionne, cependant, après l'impression d'un couple de fois, FF demande à l'utilisateur si les popups doit être désactivé que je souhaite ne pas se produire. Aussi, il ne fonctionne pas avec les vieux IE, et, probablement, d'autres navigateurs. Ne vous inquiétez pas, lors de l'impression, vous avez encore besoin de cliquez sur le système d'exploitation de dialogue d'impression, de sorte que vous ne perdez pas de papier! J'ai demandé à https://codereview.stackexchange.com/questions/39235/critique-of-jquery-plugin-which-will-print-to-a-printer-an-element-or-a-jqueryui pour toutes les recommandations.

Réels Du Plugin:

/*
* jQuery printIt
* Print's the selected elements to the printer
* Copyright Michael Reed, 2014
* Dual licensed under the MIT and GPL licenses.
*/
(function($){
var defaults = {
elems           :null, //Element to print HTML
copy_css        :false,//Copy CSS from original element
external_css    :null  //New external css file to apply
};
var methods = {
init : function (options) {
var settings = $.extend({}, defaults, options)
elems=$(settings.elems);
return this.each(function () {
$(this).click(function(e) {
var iframe   = document.createElement('iframe');
document.body.appendChild(iframe);
$(iframe).load(function(){
elems.each(function(){
iframe.contentWindow.document.body.appendChild(this.cloneNode(true));
});
if(settings.copy_css) {
var arrStyleSheets = document.getElementsByTagName("link");
for (var i = 0; i < arrStyleSheets.length; i++){
iframe.contentWindow.document.head.appendChild(arrStyleSheets[i].cloneNode(true));
}
var arrStyle = document.getElementsByTagName("style");
for (var i = 0; i < arrStyle.length; i++){    
iframe.contentWindow.document.head.appendChild(arrStyle[i].cloneNode(true));
}
}
if(settings.external_css) {
var style  = document.createElement("link")
style.rel  = 'stylesheet';
style.type = 'text/css';
style.href = settings.external_css;
iframe.contentWindow.document.head.appendChild(style);
}
var script   = document.createElement('script');
script.type  = 'text/javascript';
script.text  = 'window.print();';
iframe.contentWindow.document.head.appendChild(script);
$(iframe).hide();
});
});
});
},
destroy : function () {
//Anything else I should do here?
delete settings;
return this.each(function () {});
}
};
$.fn.printIt = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' +  method + ' does not exist on jQuery.printIt');
}    
};
}(jQuery)
);

À configurer:

$(function () {
$("#openDialog").click(function () {
$("#myDialog").dialog('open')
});
$("#myDialog").dialog({
modal: true,
autoOpen: false
});
$('#printIt').printIt({
elems: $("#myDialog"),
copy_css: true,
external_css: 'test2.css'
});
});

Salut, homme merci pour votre plugin, j'ai une recommandation, u peut supprimer l'événement Cliquez sur dans le plugin, parce que cette cause que vous avez à faire un double-clic pour l'imprimer. Merci Bien =)
Pour Google Chrome, cette solution ne fonctionne pas. Le résultat est une page vide.

InformationsquelleAutor user1032531

0

Cela va ajouter une zone imprimable, et met modal html en elle.
```
$(function () {
$("#openDialog").click(function () {
$("#myDialog").dialog('open')
});
$("#myDialog").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function (e) {
$('#divToPrint').html($(this)[0].innerHTML).printArea();
}
}
});
});
```
Vous avez besoin pour créer un nouveau <div id="divToPrint"></div> si vous ne voulez pas afficher la nouvelle div, il suffit d'utiliser style="display: none;"

Ensuite, lorsque vous appuyez sur CTRL+P, il permet d'imprimer ce que vous avez créé...
- voir ma mise à jour
- Merci! Est printArea() un plugin? Je reçois $(...).html(...).printArea is not a function. De toute façon le faire sans en appuyant sur CTRL+P?
InformationsquelleAutor Robert W. Hunter
0

Essayer comme ci-dessous.....et appelez votre div id. Vous devriez être bon d'aller.
```
buttons: { 
"Print": function() { 
$("#dialog").printArea(); 
},
"Close": function() { 
$(this).dialog("close");
}
}
```
- Pouvez-vous expliquer votre réponse un peu? Code-seules réponses sont désapprouvées dans l'ensemble.
- Je suppose que c'est nécessaire : plugins.jquery.com/PrintArea
InformationsquelleAutor Mayank

Vous devez vous connecter pour publier un commentaire.