如何打印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组件？

回答

相关问题