Open print dialog window with different HTML content

Issue

In order to open a print dialog for the current page, we do something like this:

<a href="javascript:window.print()">Print</a>

How do you make a link in the current page that will open the print dialog with a different context than the actual page?

---

Print dialog box in Chrome:

Solution

Print Dialog

After playing around (and some googling), I came out with this solution:

I added a non-printable class to the current view and printable class to the printable container element. In my CSS, I used css media queries where @media screen and @media print states contains the corresponding display behavior:

@media screen {
  .printable { display: none; }
  .non-printable { display: block; }
}

@media print {
  .printable { display: block; }
  .non-printable { display: none; }
}

Now, I can print new content from my current view without opening a new tab or changing my current view.

Check out this jsFiddle and the supported browser's list.

Answered By - Lior Elrom