Menu
I am trying to save a PDF using print option, but for some reason the 1st time it doesn't work, it comes up with an empty page. I have Googled and got some solutions, but no luck.
Thanks in advance
$("#btnPrint").click(function () {
// alert("hi");
$(".accordion-content").css('display','block');
var printWindow = window.open('', '', 'height=400,width=1200');
var strin="";
printWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="css/print.css"/></head><body onload="window.focus();" onbeforeunload="window.close();">');
// alert($(".logoHolder").html());
printWindow.document.write($(".logoHolder").html());
$('input[class="subCheck"]:checked').each(function() {
strin += $("#"+this.value).html()+"<br><br><br>";
});
printWindow.document.write(strin);
// alert();
printWindow.document.write('</body></html>');
printWindow.print();
printWindow.close();
//$( "#btnPrint" ).trigger( "click" );
});
476
In order to check where the problem was, I modified your code so it puts everything in a variable and then write it to the window. It seems like document.write doesn't render the contents before you try to print the window. Instead, I changed the innerHTML of the body, which seems to be working fine:
$("#btnPrint").click(function(){
$(".accordion-content").css('display','block');
var printWindow = window.open('', '', 'height=400,width=1200');
var html = ''+
'<html>'+
'<head>'+
'<link rel="stylesheet" type="text/css" href="css/print.css"/>'+
'</head>'+
'<body onload="window.focus();" onbeforeunload="window.close();">'+
$(".logoHolder").html();
$('input[class="subCheck"]:checked').each(function() {
html += $("#"+this.value).html()+"<br><br><br>";
});
html += '</body></html>';
//printWindow.document.write(html);
printWindow.document.body.innerHTML = html;
printWindow.print();
});
http://jsfiddle.net/hoqp8zxp/
Update to help you with your css
Regarding the CSS, I believe there are a couple of problems:
about:blank (or something similar) so relative paths won't work. You should use an absolute path (http://host/css/print.css instead of css/print.css)This is the updated code using the hack mentioned above (using an stylesheet from StackOverflow):
$("#btnPrint").click(function(){
$(".accordion-content").css('display','block');
var printWindow = window.open('', '', 'height=400,width=1200');
var cssFile = 'http://cdn.sstatic.net/stackoverflow/all.css?v=544053bd81fe';//Replace with your absolute path
var html = ''+
'<html>'+
'<head>'+
'<link rel="stylesheet" type="text/css" href="'+cssFile+'"/>'+
'</head>'+
'<body onload="window.focus();" onbeforeunload="window.close();">'+
$(".logoHolder").html();
$('input[class="subCheck"]:checked').each(function() {
html += $("#"+this.value).html()+"<br><br><br>";
});
html += '</body></html>';
//printWindow.document.write(html);
printWindow.document.body.innerHTML = html;
var img = document.createElement('img');
printWindow.document.body.appendChild(img);
img.style.display = 'none';
img.onerror = function(){
printWindow.print();
};
img.src = cssFile;
});
http://jsfiddle.net/hoqp8zxp/1/
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
