Applying print CSS on will

1
votes

I have a certain page that I want the user to be able to print using the native browser print page (window.print()) and I want to be able to show the user a preview of the page

I have a css file called print.css which looks like this : 

@media print
{ ... }

The native print looks good but I can't figure out how to show the print preview, which means applying the css within "@media print" on demand

1
javascripthtmlcssprinting

1 Answers

4
votes

You could use jQuery to insert the css to the page on demand withouth the media print tag.

Instead of doing the media print you can do this in the HTML tag itself so you can use the css file for multiple purposes

Jquery:

  $('head').append('<link rel="stylesheet" href="print.css" type="text/css" />');

Adding a media tag in the HTML:

  <link rel="stylesheet" type="text/css" href="print.css" media="print">