9

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

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

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

Print dialog box in Chrome: enter image description here

Lior Elrom
  • 19,660
  • 16
  • 80
  • 92

4 Answers4

17

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.

Community
  • 1
  • 1
Lior Elrom
  • 19,660
  • 16
  • 80
  • 92
  • 1
    Hey Lior, great answer, what if I want to print a pdf file embedded in an object tag or iframe? Is there a solution in this case? Love the creativity in your answer. It's the best I found on the internet so far! – Sofiane Oct 30 '19 at 20:09
7

I'm not sure if this is actually an answer to your question since your question has very little detail about what you mean by opening a new window.

If you are on /page/one and you want to have a link open /report/page and automatically bring up the print dialog...then that is as easy as triggering window.print on the load event, e.g.

<body onload='window.print()'>

If you don't want that page to always open the print dialog, then make the link to the new page /report/page?print=1 or something to that effect when you want to print, and when you find that in the URL trigger the onload event.

Kevin Nelson
  • 7,613
  • 4
  • 31
  • 42
  • Sorry for the VERY late response. `window.print()` is a method that opens the built-in browser print dialog with the current content, which wasn't my intention. I wanted to open the print dialog with a different content than the page has. – Lior Elrom Jan 04 '20 at 18:06
2

Include printable content in a div. Like:

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

JQuery:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

It will just print the printable div.Thanks

BibanCS
  • 309
  • 3
  • 9
1

There's a nice Javascript plugin called PrintThis that accomplishes this very easily.

You just need to use a jQuery selector and call the plugin, e.g.:

$('selector').printThis();

https://github.com/jasonday/printThis

Alejandro Pablo Tkachuk
  • 2,168
  • 21
  • 19