Print html page with internet explorer

Question

I have to print a table with its style So I'm using jQuery.copyCSS to clone its CSS,style into another element (Because I'm testing it on IE 8 and seems like it doesn't preserve CSS after clicking/calling window.print()) https://github.com/moagrius/copycss

I thought to "send" the table to another page and call from there the print.

Thus I need to clone the css into another element (to pass on the second page)

 $("#table_report").clone().attr({"id":"table_report_clone", "name":"clone"}).appendTo("body"); // doesn't matter if it appears on the page, I will just pass these one

    $('#table_report_clone').copyCSS('#table_report');  // copy CSS from original to clone

    var clone = $("#table_report_clone").html();

    var w = window.open();
    $(w.document.body).html(clone ); //table_report should be the table with its style
    w.document.close();

So, passing .html it will parse only the HTML not including the style

How can I do that?

EDIT 1: Now some icons are being displayed..however the table is really 'raw' w.document.write(clone); // instead of $(w.document.body).html(clone);

EDIT 2:

Changed adding some tips by @Roljhon

En fact this does work on FF, Chrome, but in IE 8 nope.. (Anyway I'm using JQuery 1.5.1)

dumpCSSText is a function from https://stackoverflow.com/a/15011387/7370271 since I have to get/join the styles attributes

        $("#table_report").inlineStyler();
        var table_report = document.getElementById("table_report");

        var w = window.open();
        var css = "" + dumpCSSText(table_report) //css of your table_content

        var style = document.createElement('style');

        style.type = "text/css";
        style.appendChild(document.createTextNode(css));

        w.document.head.appendChild(style);
        w.document.body.innerHTML = document.getElementById("table_report").innerHTML

EDIT 3: Now it works

var table_report = $("#table_report").html();

        var w = window.open();
        w.document.write('<html><head><link rel="stylesheet" href="/i/css/apex.min.css?v=4.2.6.00.03" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie.min.css?v=4.2.6.00.03" type="text/css"/><![endif]--><link rel="stylesheet" href="/i/libraries/jquery-ui/1.8.22/themes/base/jquery-ui.min.css" type="text/css" /></head><body>');

        $(w.document.body).html(table_report);

        w.document.write('</body></html>');
        w.document.close();
        w.focus();
        w.print();
        w.close();

Finally I'm now at 90%..the only problem is CSS in IE8..

Thank you

Roljhon · Accepted Answer · 2017-01-19T15:03:13.423

0

I tried to create a solution to your problem and this could possibly solve it or give you an idea of what to do to pass your table css.

Option 1

You could create a link to the stylesheet.Create it directly from your javascript. But make sure that the stylesheet content is the exact CSS of the table_content and append this to the head section of the new window and at the same time write your table in the body part of the new window.

 var link = document.createElement('link');
 link.rel = "stylesheet";
 link.href ="table_content_style.css"; // this will have your table_content_clone CSS

 w.document.head.appendChild(link);
 w.document.body.innerHTML = "<h1>test</h1>"; // your html table markup

Option 2

You could create the stylesheet as well directly from javascript and doing the same thing as above.

 var css = "body{background-color: red;}"; //css of your table_content
 var style = document.createElement('style');
 style.type="text/css";
 style.appendChild(document.createTextNode(css));

 w.document.head.appendChild(style);
 w.document.body.innerHTML = "<h1>test</h1>"; // your html table markup

I hope that helps. See fiddle: https://jsfiddle.net/0vzwzrpq/

edited Jan 19 '17 at 15:03

answered Jan 19 '17 at 11:48

Roljhon

1,279
2
9
22

Thank you, it works on FF, Chrome..but in IE 8 nope I'm using a function to get the style attributes from an element.. .inlineStyler() from https://github.com/davecranwell/inline-styler helps me to put everything inline – Michael Johnks Jan 19 '17 at 15:10
Hey mate, I tried to my best but I think this is an IE security feature which you can't move a DOM node to another document. But i'll try to find a workaround ,this kind of issue interest me a lot :D update the answer soon if found any! – Roljhon Jan 19 '17 at 16:16
Don't worry your tips helped me..now the problem is how can I put my table more on my left because in IE 8 there is a margin that put the table out of the page.. I've put my solution in EDIT 3, thank you – Michael Johnks Jan 19 '17 at 16:25
@MichaelJohnks IE bug I supposed. So you mean that IE is pushing your table to be more align on the left when you want it to be at the center? is that it? – Roljhon Jan 19 '17 at 16:51
Actually it puts the table more on right..like if there is a margin or something..this cut my table because it goes out of the page I've put @Page { margin 0; } but nothing.. – Michael Johnks Jan 19 '17 at 17:03
I hope this helps https://code.tutsplus.com/tutorials/9-most-common-ie-bugs-and-how-to-fix-them--net-7764 – Roljhon Jan 19 '17 at 17:08

score 0 · Answer 2 · answered Jan 19 '17 at 12:02

0

The best approach to style elements you'd like to print is to use CSS media queries.

@media print {
    body {
        background-color: pink;
    }
}

There is a very good article here about the subject: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

answered Jan 19 '17 at 12:02

bini

154
1
5

I'm testing it on IE 8 which doesn't support media queries Not even using css3-mediaqueries-js.. – Michael Johnks Jan 19 '17 at 12:02
use inline style rules instead. For IE8 and lower to center content you need (IE7 emulation does not recognise the auto margin rule.) then you can use jquery to clone the table (complete with the inline style rules) to the print preview window.
– Rob Parsons Jan 20 '17 at 02:46

Print html page with internet explorer

2 Answers2