Unable to insert stylesheet/script into window.open

问题

I have been fighting this issue for quite some time now, and have been (still) unable to print my div with its styling.

Currently, my script is:

$('#printMeButton').click(function () {
    //alert("a");
    var data = document.getElementById('thisPrintableTable').outerHTML;

    var mywindow = window.open('', data);
    mywindow.document.write('<html><head><title>Print Me!!!</title>');
    // mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus();
    mywindow.print();
    mywindow.close();
    return true;

});

which is nested within a $(document).ready function.

When I include the desired stylesheet (currently commented out), Nothing appears in the print preview.

I also have some script that has an effect on the appearance of the table, and, as such, I believe this may hold the key of having these included into the popup window.

How can i include this into the new popup?

Could someone please suggest a way of printing this as it stands?

Edit History

removed space at end of </head><body>
Changed var data to have outerHTML instead of innerHTML
Altered Question/details from better understanding of issue

回答1:

Try to open a local html file using window.open with css linked within it. And set the content html to be printed to the local html file using js.

Here is the page to be printed:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="test.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js"></script>
</head>
<body>
    <div id="print">
        <div class="red">TODO write content</div>
    </div>
    <button id="print_btn">Print</button>
    <script>
        $('#print_btn').click(function(){
            var newWindow = window.open('print.html','_blank');
            $(newWindow).load(function(){
               $(newWindow.document).find('body').html($('#print').html());
            });
        })
    </script>
</body>
</html>

The css file test.css is linked here, and I'm opening print.html at the time of window.open, the test.css is also linked in the print.html

Now, in print.html I'll write:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

回答2:

Since you provide an empty string as a new window's URL (the first parameter of the open function), the page inside it most likely can't figure out where your stylesheet is (as it's address is "relative to nothing"). Try specifying an absolute URL to your stylesheet.

Also, there is media="screen" attribute that should be changed to media="print"

mywindow.document.write('<link rel="stylesheet" type="text/css" href="http://my.site/Site.css" media="print"')

回答3:

The issue can be solved by introducing some delay time before executing mywindow.close(); method. Seems that some time is needed for CSS to be applied (loaded), like this:

$('#printMeButton').click(function () {
    var content = document.getElementById(id).innerHTML;
    var mywindow = window.open('', 'Print', 'height=600,width=800');
    mywindow.document.write('<!DOCTYPE html><html dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Print</title>');
    mywindow.document.write('<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.focus()
    mywindow.print();

    // this is needed for CSS to load before printing..
    setTimeout(function () {
        mywindow.close();
    }, 250);

    return true;
});

来源：https://stackoverflow.com/questions/27268651/unable-to-insert-stylesheet-script-into-window-open

标签

css

html5

kendo-grid

printing-web-page