將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對話框的內容打印到打印機

回答

相關問題