CODEWITHSUNDEEP
javascripthtmlcssprintingmedia
Some Java Guy
Some Java Guy

Reputation: 5118

Simple print example

I need to provide a print link on my simple html page.

When the user clicks on that, I want a pop-up which displays a print preview and the system printer should come up. I guess something with window.print(); option, but this directly gives the window print option without the preview. I want the page preview first and then call window.print(); An example html would help...

More over the example you provide can also have media type print in it. So that the normal html color looks red. But when the print link is selected we need to show print preview in blue color. I know this could be overridden methods using @media print in css file.

Any example please...Thanks

Upvotes: 4

Views: 3432

Answers (2)

techfoobar
techfoobar

Reputation: 66693

Suppose report.html is the page you want to print. Develop the page in such a way that it accepts a media argument as a GET paramater. i.e. something like yoursite.com/report.html?media=X - where X can be 'screen', 'print' etc. If X is empty, it can use the default value of 'screen'

Write 2 css files namely screen.css and print.css - Depending on this value of the media argument (X) import either screen.css or print.css into your page.

In screen.css, write your style defs inside a '@media screen' block like:

@media screen {
  body {
  ... screen style here ...
  }
}

In print.css, write your style defs inside a '@media screen, print' block like:

@media screen, print {
  body {
  ... print style here ...
  }
}

In your report.html, suppose you have a print button, in its onclick, call window.open('report.html?media=print', ...). Also do the same from a keydown handler attached to your document object on receiving a Ctrl+P.

Also, in your page's onload, check if the media argument is 'print' and if it is then call window.print() after a short delay (say 500ms), i.e. something like:

if(window.location.href.indexOf('media=print')!=-1) {
  setTimeout(function() { window.print(); }, 500);
}

Upvotes: 0

ChrisR
ChrisR

Reputation: 14467

The print preview feature is client specific. The latest chrome displays a print preview but most other browsers just display the print dialog upon calling the print() method.

Concerning print styling you should read up on print stylesheets. The A-list-apart article by Eric Meyer from a few years back is a good start with some decent examples. http://www.alistapart.com/articles/goingtoprint/

Upvotes: 2

Related Questions