Print function only works after second click

Question

I have this function to print a DIV.
Whenever the page is loaded and I click in a "Print" link I have, the DIV is shown to be printed without CSS.
If I close Chrome's print visualization page and click in the "Print" link again, the DIV has CSS applied.

Any ideas why?

Javascript

function printDiv(divId) {

  var printDivCSSpre =
'<link href="/static/assets/vendor/sb-admin-2-1.0.7/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">' +
'<link href="/static/assets/vendor/sb-admin-2-1.0.7/dist/css/sb-admin-2.css" rel="stylesheet">' +
'<div style="width:1000px; padding-right:20px;">';

  var printDivCSSpost = '</div>';

  $('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');

    $("link").clone().appendTo($("#print_frame").contents().find("head"));
window.frames["print_frame"].document.body.innerHTML =
    printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
  window.frames["print_frame"].window.focus();
  var windowInstance = window.frames["print_frame"].window;
  windowInstance.print();
}

HTML

<a id="print" href="#">
    <i class="fa fa-print"></i> Print
</a>
<script>
    $('#print').click(function () {
        printDiv('report')
    })
</script>

<div id="report" class="report">
    <p># Generated Table#</p>
</div>

First click:

https://i.stack.imgur.com/G6RU4.jpg

Closing the print preview page and clicking again in print

https://i.stack.imgur.com/NLQqS.jpg

A full working example would go a long way towards helping us help you. — lleaff, Feb 06 '17 at 13:10
Could you please make a fiddle? Maybe then it would be easier for us to assist... — Jan Legner, Feb 09 '17 at 18:21
https://jsfiddle.net/ytzcwykz/7/ is working just fine. Which jquery version you are using? — Asad Sarwar, Feb 13 '17 at 14:39
Check it again. I uploaded the css I am using and now it is a perfect example. If you click two times, the first has no css and the second does. — Ev., Feb 14 '17 at 09:59
I have added an answer based on your fiddle. Basically forcing css before cloning content might be necessary. — pewpewlasers, Feb 14 '17 at 16:49
Use inline CSS instead. Reason: When we PRINT or save as PDF if fails to fetch external css Files, So we have to use Inline css — Ashish Yadav, Feb 15 '17 at 07:55

score 2 · Answer 1 · answered Feb 10 '17 at 03:22

2

This happens because when you call your printDiv() function, css is also written using inner HTML and in this scenario CSS is not applied during first click because you wrote CSS to the elements even when they do not exist inside DIV.

The function to work as desired has to write DIV contents first and then CSS should be applied. I would say write css after contents of DIV or load on top of your HTML page and just write DIV contents.

Hope that helps.

answered Feb 10 '17 at 03:22

Atul Jindal

946
8
8

But I concatenate the strings in the correct order (CSS on top) and then I display the widow. Why wouldn't it work? – Ev. Feb 13 '17 at 12:01

score 1 · Answer 2 · edited May 23 '17 at 12:32

As other people mentioned it is hard to see your problem without seeing the working example of a problem, but just guessing from the code:

Browser is not able to load the CSS before your print() call.
Browser is not able to render the CSS before your print() call.

Keeping that in mind changing your JS function that way might do the trick

function printDiv(divId) {
    $("link").clone().appendTo($("#print_frame").contents().find("head"));
    window.frames["print_frame"].document.body.innerHTML =
        printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
    window.frames["print_frame"].window.focus();
    var windowInstance = window.frames["print_frame"].window;
    setTimeout(function() {
        windowInstance.print();
    }, 0);
}

The idea behind this function is to let browser execute it's code after we added changed the HTML/CSS code in the window - see Why is setTimeout(fn, 0) sometimes useful?

WARNING: this approach is not tested for your particular problem, and it might also not work because we escape/leave the mouse-click call-stack, calling print() method might be not possible out of user-interaction stack.

UPDATE: after looking in the posted jsfiddle - my assumption was correct, the browser needs some time to load and render the CSS, that is why calling the print() right after changing iframe contents doesn't give the desired result. There are 3.5 ways to solve that:

Use events to identify when iframe's document and window has finished loading and rendering. I tried two approaches, and failed so far, need to read docs more carefully about when document and window are behiving during the loading sequence:
- we can do that from outside of iframe, i.e. listen to events of iframe element and it's children
- we can do that from inside of iframe, i.e. add little javascript snippet inside which will send a message to the parent window when loading is done.
Consider forming the print result different, how about print style-sheets? I.e. add one more style sheet with print-media query to the parent doc and just call print on it?
Consider forming an iframe which is already loaded and ready to be printed, but replace just the table contents inside it.

ok, could you please create a minimal working prototype in jsfiddle.net or alike and share link here to see it breaking live? — Anton Boritskiy, Feb 13 '17 at 12:38
@Ev. thanks for the example, I checked it - see update in my answer — Anton Boritskiy, Feb 15 '17 at 11:13

pewpewlasers · Answer 3 · 2017-02-15T07:31:45.477

Try this one. The problem mainly arises because the css has not been applied to the page when the print command is initiated. setTimeout is one way to solve it as others have mentioned but it is really not possible to predict how much delay you will need. Slow internet connections will require high delays before you fire the print statement. The following code, however, only fires the print event after the css has been properly applied to the iframe.

$('#print').click(function () {

    if($("#print_frame").length == 0) {
        $('#report').after('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');
    }

    var $head = $("#print_frame").contents().find("head");

        // for now for ease I will just empty head
        // ideally you would want to check if this is not empty
        // append css only if empty
        $head.empty();
        $.ajax({
            url : "https://dl.dropboxusercontent.com/u/7760475/reports.css",
            dataType: "text",
            success : function (reports) {
                // grab css and apply its content to the iframe document
                $head.append('<style>'+reports+'</style>');
                $.ajax({
                    url : "https://dl.dropboxusercontent.com/u/7760475/bootstrap.css",
                    dataType: "text",
                    success : function (bootstrap) {
                        // grab another css and apply its content to the iframe document
                        // there may be better ways to load both css files at once but this works fine too
                        $head.append('<style>'+bootstrap+'</style>');
                        // css has been applied
                        // clone your div and print
                        var $body = $("#print_frame").contents().find('body');
                            // empty for ease
                            // but later append content only if empty
                            $body.empty();

                        $("#report").clone().appendTo($body);
                        $('#print_frame').get(0).contentWindow.print();
                    }
                });
            }
        });
});

Ashish Yadav · Answer 4 · 2017-02-15T08:06:39.417

1

Use inline CSS instead. Reason: When we PRINT or save as PDF if fails to fetch external css Files, So we have to use Inline css. edited your file please see: jsfiddle.net/ytzcwykz/18/

edited Feb 15 '17 at 08:06

answered Feb 15 '17 at 07:57

Ashish Yadav

3,039
1
16
23

score 1 · Accepted Answer · answered Feb 15 '17 at 08:42

Every thing is right just change the sequence. In browser debugger on first click it didn't show 'print_frame' in sources section while in second click it does (I am using chrome devtool).

So load in memory frame with css attributes during onload:

var windowInstance;
$(function(){
    $('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>');
    $("link").clone().appendTo($("#print_frame").contents().find("head"));
    windowInstance = window.frames["print_frame"].window;

});

and onClick just append html

$('#print').click(function () {
    var divId = 'report';
    var printDivCSSpre ='<div id="printReportDiv" style="width:1000px; padding-right:20px;">';
    var printDivCSSpost = '</div>';

    window.frames["print_frame"].document.body.innerHTML = printDivCSSpre + document.getElementById(divId).innerHTML + printDivCSSpost;
    window.frames["print_frame"].window.focus();
    windowInstance.print();

});

updated jsfiddle

just checked with. download 10 kb/s, upload 5 kb/s, latency 500ms in chrome devtool network throttling. — Asad Sarwar, Feb 15 '17 at 11:39

score 0 · Answer 6 · answered Feb 14 '17 at 22:04

0

As others mentioned, The problem here is that the CSS files used are external resources and browser takes time to download and cache it locally. Once it is cached, it would serve faster and that's why it works fine from the second click.

As Anton mentioned, setTimeout is the key here! You may probably increase the timeout seconds to make that work. I tried setting it to 500ms and that worked,

setTimeout(function(){windowInstance.print();},500);

answered Feb 14 '17 at 22:04

Muthu Vijayan

93
9

For slow internet connections and computers, this will take a lot longer than half a second! It's going to be really hard to adjust the milliseconds it takes because every connection, every browser is different, and some may be able to load it in 500 ms and some may take around 5000ms! – Feb 15 '17 at 02:54
I suggested `setTimeout(function () {...}, 0)` to escape the current call sequence and move the javascript frame to the end on the queue, that has nothing to do with waiting for half a second, that is sort of a hack. Please see http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful When dealing with loading the content over network, adding actual timeout is not an option, because that doesn't guarantee that content will load in the given time as mentioned by @TyQ. – Anton Boritskiy Feb 15 '17 at 11:17

Print function only works after second click

Javascript

HTML

First click:

Closing the print preview page and clicking again in print

6 Answers6