Geek Answers Handbook

Open a new print dialog with various HTML content

To open the print dialog for the current page, we do something like this:

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

How to make a link on the current page that opens the print dialog with a different context than the actual page?

Chrome Print Dialog Box: enter image description here

+7
javascript jquery html css printing
source share
4 answers

Print dialog

After the game (and some search queries), I came out with this solution:

I added the non-printable class to the current view and the printable class to the print container element. In my CSS, I used css media queries where the @media screen and @media print states contain the appropriate 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 the current view without by opening a new tab or changing the current view.

See the jsFiddle and supported browser list.

+7
source share

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

If you are on page / page / and you want to open the link / report / page and automatically open the print dialog ... then it is as simple as launching window.print in the load event, for example

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

If you do not want this page to always open the print dialog, then create a link to the new page /report/page?print=1 or something like that when you want to print and when you find that in the URL onload address.

+7
source share

There's a nice Javascript plugin called PrintThis that makes this very easy.

You just need to use the jQuery selector and call the plugin, for example:

 $('selector').printThis();

https://github.com/jasonday/printThis

0
source share

Include printable content in a div. How:

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 a printed div.Thanks

0
source share

More articles:


All Articles