将jQuery对话框的内容打印到打印机

我有以下jQueryUI对话框。我如何打印对话框的内容？内容可以是任何HTML，例如表格，图像等。以前有几个关于这个问题的答案，但是，它们看起来已经过时了。将jQuery对话框的内容打印到打印机

<!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>

来源

2014-01-08 user1032531

你能解释一下你到底想要什么吗？您是否希望将模式中的内容打印到单独的'div＃'中，或者当您单击'Ok'按钮时，想要打印模式的'p'和'img'（或其他），进入警报窗口在代码中？ –

我开发了我自己的插件，代码如下，一个现场示例位于http://jsfiddle.net/fyu4P/embedded/result/。

在FF 26.0上，它可以正常工作，但是在打印几次后，FF会询问用户是否禁用弹出窗口，但不希望发生这种情况。此外，它不适用于较旧的IE浏览器以及其他浏览器。不要担心，在打印时，您仍然需要点击操作系统打印对话框，这样您就不会浪费任何纸张！我已要求https://codereview.stackexchange.com/questions/39235/critique-of-jquery-plugin-which-will-print-to-a-printer-an-element-or-a-jqueryui提供任何建议。

实际插件：

/* 
* 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) 
);

配置：

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

来源

2014-01-14 20:37:29 user1032531

嗨，男士谢谢你的插件，我有一个建议，你可以删除事件**点击插件中的**，因为这个原因，你必须做一个双击可以打印。非常感谢=） – Christian

对于Google Chrome浏览器，此解决方案不起作用。结果是一个空白页面。 – oracleruiz

这将添加一个可打印的区域，并将模态html放入其中。

$(function() { 
    $("#openDialog").click(function() { 
     $("#myDialog").dialog('open') 
    }); 
    $("#myDialog").dialog({ 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      Ok: function (e) { 
       $('#divToPrint').html($(this)[0].innerHTML).printArea(); 
      } 
     } 
    }); 
});

您需要创建一个新的<div id="divToPrint"></div>，如果你想不显示新的div，只需使用style="display: none;"

然后，当你按下CTRL + P将打印你创造了什么......

来源

2014-01-08 17:15:16

@ user1032531看到我的更新 –

谢谢！ 'printArea（）'是一个插件吗？我得到'$（...）。html（...）。printArea不是函数'。无论如何不按CTRL + P做到这一点？ – user1032531

尝试像下面.....并打电话给你的DIV ID。你应该很好走。

buttons: { 
      "Print": function() { 
       $("#dialog").printArea(); 
      }, 
      "Close": function() { 
       $(this).dialog("close"); 
      } 
     }

来源

2015-05-05 19:43:45 Mayank

你能解释一下你的答案吗？总的来说，仅有代码的答案是令人不悦的。 –

我认为这是必需的：https：//plugins.jquery.com/PrintArea/ – David

将jQuery对话框的内容打印到打印机

回答

相关问题