{"id":193,"date":"2010-04-25T17:09:03","date_gmt":"2010-04-25T11:39:03","guid":{"rendered":"http:\/\/vikku.info\/codesnippets\/?p=193"},"modified":"2010-04-25T17:09:32","modified_gmt":"2010-04-25T11:39:32","slug":"print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document","status":"publish","type":"post","link":"http:\/\/vikku.info\/codesnippets\/javascript\/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document\/","title":{"rendered":"print div content &#8211; Print only the content of an HTML element and not the whole document"},"content":{"rendered":"<p>This snippet will print the contents of any html element and not the entire page.<br \/>\nGet the contents of the innerhtml of the element. Here it is a div. We are going to print the contents of a div.<br \/>\nDefine an iframe (better before this script).<br \/>\nThis iframe is hidden on the screen by giving the style so and so.<br \/>\nGet a reference to the iframe&#8217;s contentwindow so that you can write the contents of the div in to the body of the iframe.<br \/>\nUse the close command like in the script else you can see that the browser is still loading the page even if you have completely written all the text into the content window.<br \/>\nSo when you do close call you specify that there is no more contents to write to.<br \/>\nAnd then we make the iframe as the active window because when you print the active windows total body content will gets printed.<br \/>\nand then we call the print command. voila.<br \/>\nWithout any modification this code snippet works well for me so hope it would be the same case for you guys.<\/p>\n<p>The JavaScript code<\/p>\n<pre lang='javascript'>\r\nvar content = document.getElementById(\"divcontents\");\r\nvar pri = document.getElementById(\"ifmcontentstoprint\").contentWindow;\r\npri.document.open();\r\npri.document.write(content.innerHTML);\r\npri.document.close();\r\npri.focus();\r\npri.print();\r\n<\/pre>\n<p>The HTML Code<\/p>\n<pre lang='html4strict'>\r\n<iframe id=\"ifmcontentstoprint\" style=\"height: 0px; width: 0px; position: absolute\"><\/iframe>\r\n<\/pre>\n<p>Why the need of an iframe?<br \/>\nas you all know when you print the whole document gets printed.<br \/>\nSo we create a hidden new document with the help of an iframe and we assign the contents we want to print to the body of the iframe.<br \/>\nSo the iframe will contain only the contents which we want to print.<br \/>\nAnd since the iframe is hidden everything will appear normal at the same the work is done.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This snippet will print the contents of any html element and not the entire page. Get the contents of the innerhtml of the element. Here it is a div. We are going to print the contents of a div. Define an iframe (better before this script). This iframe is hidden on the screen by giving [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/193"}],"collection":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":2,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":195,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/193\/revisions\/195"}],"wp:attachment":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/media?parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/categories?post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/tags?post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}