Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Printing a page without displaying it?

I have a page from which the user will be able to print. However, the page which will get printed is not the one the user is viewing, but rather a new one I'd like to generate on the background and (possibly) only show the print dialog for it.

Just to make things clear:

  1. User is on "View.aspx" and clicks my Print button (not the browser's one).
  2. The Print button loads the content of "Printable.aspx" and displays a print dialog for it while the user is still on "View.aspx".

FYI, what I'm trying to avoid is to have the "Printable.aspx" open in a new window and then show its print dialog.

Thanks in advance.

like image 344
rebelliard Avatar asked Jul 27 '10 16:07

rebelliard


People also ask

How do I hide the elements when printing?

To hide the element, add “display:none” to the element with CSS.

How do I hide print button when printing?

Use CSS @media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.

How do I hide print in HTML?

Use @media print query and set the visibility hidden to that element that needs to hide at printing. Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden.


1 Answers

Use a combination of MEDIA tags in CSS to show/hide objects for printing.

<STYLE type="text/css">
@media print {
   .PrintOnly {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
   .PrintOnly {display: none}
}
</STYLE>

You can make controls that are style Display:none on media screen, so the user only sees them when printing.

<DIV class="PrintOnly">
This control will only show up during printing
</DIV>

Any of your controls can be classed as "PrintOnly" so you only see them when printing. You just need to have the css class defined once for "@media screen" and once for "@media print" to ensure they behave differently.

You can also bring in an entire stylesheet for print-only.

<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
like image 125
Carter Medlin Avatar answered Sep 18 '22 19:09

Carter Medlin