如何打印ExtJS組件？

1

在ExtJS中打印並不是特別容易。我在製作打印組件的最佳資源可在Sencha architect's blog上找到。該文章介紹瞭如何爲組件設置自定義打印渲染器以及有關打印的其他詳細信息。但是，此信息適用於ExtJS 3.x; ExtJS 4可能使打印更容易。

來源

2011-05-09 16:21:54 NT3RP

+0

該Sencha建築師鏈接已損壞。 – Blaise 2013-06-04 16:16:31

+0

我已更新鏈接以使用Wayback Machine的博客文章副本。 – NT3RP 2013-06-04 19:31:00

7

    var targetElement = Ext.getCmp('PrintablePanelId'); 
        var myWindow = window.open('', '', 'width=200,height=100'); 
        myWindow.document.write('<html><head>'); 
        myWindow.document.write('<title>' + 'Title' + '</title>'); 
        myWindow.document.write('<link rel="Stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css" />'); 
        myWindow.document.write('<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.1/bootstrap.js"></script>'); 
        myWindow.document.write('</head><body>'); 
        myWindow.document.write(targetElement.body.dom.innerHTML); 
        myWindow.document.write('</body></html>'); 
        myWindow.print();

將您的extjs可打印組件寫入文檔。

來源

2011-08-10 16:30:09

+0

+1我採取了這種方法並對其進行了擴展（請參閱下面的答案） – Peter 2012-07-10 17:13:03

1

我喜歡Gopal Saini的回答！我採取了他的方法，併爲我的一個應用程序編寫了一個函數。這是代碼。經過FF和Safari測試。還沒有在IE上試過，但它應該可以工作。

print: function(el){ 

    var win = window.open('', '', 'width='+el.getWidth()+',height='+el.getHeight()); 
    if (win==null){ 
     alert("Pop-up is blocked!"); 
     return; 
    } 


    Ext.Ajax.request({ 

     url: window.location.href, 
     method: "GET", 
     scope: this, 
     success: function(response){ 

      var html = response.responseText; 
      var xmlDoc; 
      if (window.DOMParser){ 
       xmlDoc = new DOMParser().parseFromString(html,"text/xml"); 
      } 
      else{ 
       xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
       xmlDoc.async = false; 
       xmlDoc.loadXML(html); 
      } 


      win.document.write('<html><head>'); 
      win.document.write('<title>' + document.title + '</title>'); 


      var xml2string = function(node) { 
       if (typeof(XMLSerializer) !== 'undefined') { 
        var serializer = new XMLSerializer(); 
        return serializer.serializeToString(node); 
       } else if (node.xml) { 
        return node.xml; 
       } 
      } 


      var links = xmlDoc.getElementsByTagName("link"); 
      for (var i=0; i<links.length; i++){ 
       win.document.write(xml2string(links[i])); 
      } 

      win.document.write('</head><body>'); 
      win.document.write(el.dom.innerHTML); 
      win.document.write('</body></html>'); 
      win.print(); 
     }, 
     failure: function(response){ 
      win.close(); 
     } 
    }); 
}

來源

2012-07-10 17:11:44 Peter

0

要考慮的另一個選擇是將組件渲染爲圖像或pdf。雖然彈出窗口/打印選項很好，但某些瀏覽器無法正確打印。他們傾向於忽略背景圖像，某些css屬性等。爲了讓組件打印完全按照它在彈出窗口中顯示的方式打印，我最終編寫了一些服務器端代碼將html轉換爲圖像。

這裏的客戶端代碼如下所示：

print: function(el){ 

    var waitMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
    waitMask.show(); 


    //Parse current url to set up the host and path variables. These will be 
    //used to construct absolute urls to any stylesheets. 
    var currURL = window.location.href.toString(); 
    var arr = currURL.split("/"); 
    var len = 0; 
    for (var i=0; i<arr.length; i++){ 
     if (i<3) len+=(arr[i].length+1); 
    } 
    var host = currURL.substring(0, len); 
    if (host.substring(host.length-1)=="/") host = host.substring(0, host.length-1); 

    var path = window.location.pathname; 
    if (path.lastIndexOf("/")!=path.length-1){ 
     var filename = path.substring(path.lastIndexOf("/")+1); 
     if (filename.indexOf(".")!=-1){ 
      path = path.substring(0, path.lastIndexOf("/")+1); 
     } 
     else{ 
      path += "/"; 
     } 
    } 


    //Start constructing an html document that we will send to the server 
    var html = ('<html><head>'); 
    html += ('<title>' + document.title + '</title>'); 


    //Insert stylesheets found in the current page. Update href attributes 
    //to absolute URLs as needed. 
    var links = document.getElementsByTagName("link"); 
    for (var i=0; i<links.length; i++){ 
     var attr = links[i].attributes; 
     if (attr.getNamedItem("rel")!=null){ 

      var rel = attr.getNamedItem("rel").value; 
      var type = attr.getNamedItem("type").value; 
      var href = attr.getNamedItem("href").value; 

      if (href.toLowerCase().indexOf("http")!=0){ 
       if (href.toString().substring(0, 1)=="/"){ 
        href = host + href; 
       } 
       else{ 
        href = host + path + href; 
       } 
      } 

      html += ('<link type="' + type + '" rel="' + rel+ '" href="' + href + '"/>'); 
     } 
    } 

    html += ('</head><body id="print">'); 
    html += (el.dom.innerHTML); 
    html += ('</body></html>'); 


    //Execute AJAX request to convert the html into an image or pdf - 
    //something that will preserve styles, background images, etc. 
    //This, of course, requires some server-side code. In our case, 
    //our server is generating a png that we return to the client. 
    Ext.Ajax.request({ 

     url: "/WebServices/Print?action=submit", 
     method: "POST", 
     rawData: html, 
     scope: this, 
     success: function(response){ 
      var url = "/WebServices/Print?action=pickup&id="+response.responseText; 
      window.location.href = url; 
      waitMask.hide(); 
     }, 
     failure: function(response){ 
      win.close(); 
      waitMask.hide(); 
      var msg = (response.responseText.length>0 ? response.responseText : response.statusText); 
      alert(msg); 
     } 
    }); 
}

同樣，這需要一些服務器端魔術將HTML轉換成圖像。就我而言，我實施了「打印」服務。客戶通過「提交」操作提交工作請求，並通過「提貨」操作檢索輸出產品。

要將html轉換爲圖片，我最終使用了一個名爲Web Screen Capture的免費命令行應用程序。它只適用於Windows，我不知道如何擴展它是如此使用風險。

來源

2012-07-11 19:07:32 Peter

2

ExtJS的4.1： https://github.com/loiane/extjs4-ux-gridprinter

來源

2012-08-30 13:50:33

2

您也可以將組件添加到被打印到Ext.window.Window採用模態屬性設置爲true，只是打開一個標準打印對話框，將只打印所需的組件。

var view = this.getView(); 
var extWindow = Ext.create('Ext.window.Window', { modal: true }); 
extWindow.add(component); // move component from the original panel to the popup window 
extWindow.show(); 

window.print(); // prints only the content of a modal window 

// push events to the event queue to be fired on the print dialog close 
setTimeout(function() { 
    view.add(component); // add component back to the original panel 
    extWindow.close(); 
}, 0);

來源

2017-05-29 09:48:36 fen1ksss

+0

這對我有效 - 我還創建了一個循環遍歷組件的函數。我檢查面板高度，並在需要分頁符時插入一個空格 – 2018-02-24 21:21:48

如何打印ExtJS組件？

回答

相關問題