All geek questions in one place

How to print ExtJS component?

How do I open the Print dialog box that will print the component when OK-ed?

+6
source share
6 answers

Printing in ExtJS is not easy to use. The best resource I found while creating components for printing can be found on the Sencha archive blog . The post describes how to set up personalized imaging tools for components and other printing information. However, this information is intended for ExtJS 3.x; it is possible that ExtJS 4 simplified printing.

+1
source 
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();

write your extjs print file to the document.

+7
source

You can also add a printable component to Ext.window.Window with the modal property set to true, and simply open the standard print dialog that will print only the desired component.

 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);
+2
source

I like the answer of Gopal Saini! I took his approach and wrote a function for one of my applications. Here is the code. Tested on FF and Safari. Did not try this on IE, but it should work.

 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(); } }); }
+1
source

Another option to consider is to render the image component or PDF. Although the pop-up / print option is good, some browsers do not print correctly. They tend to ignore background images, certain css properties, etc. To make the component print exactly as it appears in the popup, I ended up writing server-side code to convert html to image.

This is what the client code looks like:

 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); } }); }

Again, this requires some server-side magic to convert html to image. In my case, I implemented the Print service. Customers send job requests through the send action and retrieve output products through the pickup action.

To convert html to images, I ended up using the free command-line app Capture Web Screen . It only works with windows, and I don’t know how scalable it is at your own risk.

0
source

Source: https://habr.com/ru/post/887638/

More articles:


All Articles