Apex Oracle print on Internet Explorer

1
votes

I have a page that contains 2 interactive report. I need to print it so I have a javascript function that calls window.print()

So I've put some CSS to adjust my table

@media print {
 width: 100%; 
 height: 100%; 
 margin: 0% 0% 0% 0%; 
}

The problem is running this page on IE 8 (or prior), because @media isn't supported.

How can I print these files?

I've put the same CSS into an external file and call it

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

but it doesn't work

How can I solve it?

Thank you

1
javascriptcssoraclemediaoracle-apex
Add/remove the extra stylings 'manually' when the page gets printed on <=IE8. – Shilly

1 Answers

1
votes

In this case I think ou should use 'conditional stylesheets'.

You can create a css file like IEPrint.css and put the specific styles you want there, and with your other stylesheets you put something like this:

<!--[if IE 8]>
   <link rel="stylesheet" type="text/css" href="IEPrint.css">
<![endif]-->

The code above will only 'work' if the user is in Internet Explorer 8.

You can use other conditionals like:

<!--[if lt IE 9]>
   <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

The code above 'works' for Internet Explorer 8 and Lower.

Here is a great article about stylesheets conditionals: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Trigger print style on click For Internet Explorer with jQuery

But to control the element style when another element click event is triggered, we should use javascript (this is not the best way).

I did a fiddle so you can see the code in action: https://jsfiddle.net/dobbinx3/pLvzk8rv/6/

Basically we have an element <p> that when we want to print it turns red, when we are not printing it, the color is black.

A button that has a click event triggered on it.

And a function to restore the screen layout when we finish the print action.

REMEMBER

  1. You should do this 'workaround' only for Internet Explorer, put an <script> inside the conditional I mentioned before and use it only for the browsers that did not support @media print.
  2. I noticed that you will set the height to 100%, check the display, and if you want the position attributes. If you think it is not working. For example if you want to set it in a <div> element.

Hope it works,

Cya.