Printing part of website a.k.a. how I got my CV printed

I’ve been looking for a new job for quite some time. Sooner or later I had to make a resume or a CV. I was looking for Free CV generator google poped a bunch of results. But guess how many of them were actually free…

Of course none. After experiencing six hours of false advertising I decided that’s enough. If I can see something on a website I surely can print it, huh? After few minutes of googling it up I found this SO post.

Basically @pmtamal approach is to copy all interesting contents in to new Window and invoke Print there.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print(); //I would rather prefer call ctrl+P manually

It does work, but it is a bit flawed. It does not copy styles… Let’s apply some basic JS knowledge.

var styles = document.getElementsByTagName('style')
var links = document.getElementsByTagName('link')

And we only have to shove it into that window we created.

function PrintDivById(id) {
  var prtContent = document.getElementById(id);
  console.log(prtContent.innerHTML);
  var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  var document_html = "<html> <head>";
  var styles = document.getElementsByTagName('style')
  for(var i =0; i < styles.length; i++){
   	document_html += styles[i].outerHTML;
  }
  var links = document.getElementsByTagName("link");
  for(var i = 0; i < links.length; i++){
    document_html +=links[i].outerHTML;
  }
  document_html += "</head> <body>";
  document_html += prtContent.outerHTML;
  document_html += "</body> </html>";
  WinPrint.document.write(document_html);
  WinPrint.document.close();
  WinPrint.focus();
}

And in a bit more functional way..

//By Baransu
function printDivById(id) {
  const prtContent = document.getElementById(id);
  const windowPrint = window.open("", "", "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0");
  const documentHtml = [
    "<html><head>",
    document.getElementsByTagName("style").map(style => style.outerHTML).join(""),
    document.getElementsByTagName("link").map(link => link.outerHTML).join(""),
    "</head><body>",
    prtContent.outerHTML,
    "</body></html>"
  ].join("")
  windowPrint.document.write(document_html);
  windowPrint.document.close();
  windowPrint.focus();
}

Written on July 10, 2017