I try to print part of my website but when I try to do this, the css properties are not shown. The thing is that I have my css information embedded in my html file. Do you have a solution for that?
var content = document.getElementById("div id");
var WinPrint = window.open('', '');
WinPrint.document.write(content.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
Thanks!
Try this:
Just embed your CSS file like this...
var content = document.getElementById("div id");
var WinPrint = window.open('', '');
WinPrint.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );
WinPrint.document.write(content.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
Related
I am trying to print a specific content area of my page. My problem is I have created separate CSS file for the content of this print area. But that external CSS is not working (loading) in browser print popup. I am sure file path is correct.
This is how I tried it:
function printReceipt(el) {
var docHead = "<html>\
<head>\
<title></title>\
<link rel='stylesheet' href='css/receipt-print.css' type='text/css' media='print' />\
</head>\
<body>";
var docFoot = " </body>\
</html>";
var docBody = document.getElementById(el).innerHTML;
var defaultBody = document.body.innerHTML;
document.body.innerHTML = docHead+docBody+docFoot;
//document.close();
//window.focus();
//setTimeout(function() {
window.print();
document.body.innerHTML = defaultBody;
//}, 1000);
//return true;
}
UPDATE:
Also check in this way. Problem is sill same.
function printReceipt(el) {
var w = window.open();
w.document.write('<html><head><title></title>');
w.document.write('<link rel="stylesheet" type="text/css" href="css/receipt-print.css">');
w.document.write('</head><body >');
w.document.write(document.getElementById(el).innerHTML);
w.document.write('</body></html>');
w.document.close();
w.focus();
w.print();
w.close();
return true;
}
Any ideas and suggestion would be appreciated.
The issue was you were printing the page without waiting for the styles and resources to load.
You should wait for the page to load before trying to print it or you can try using inline styles.
function printReceipt(el) {
var w = window.open();
w.document.write('<html><head><title></title>');
w.document.write('<link rel="stylesheet" type="text/css" href="css/receipt-print.css">');
w.document.write('</head><body >');
w.document.write(document.getElementById(el).innerHTML);
w.document.write('<script type="text/javascript">addEventListener("load", () => { print(); close(); })</script></body></html>');
w.document.close();
w.focus();
}
I want to link css file on printing specific div but it dose not get stylesheet on printing area. How can i fix this. Here is my source code:
function print_area(){
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>');
win.document.write($("#article_main_wrapper").html());
win.document.write('</body></html>');
win.print();
win.close();
}
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
var html = '<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>';
html += $("#article_main_wrapper").html();
html += '</body></html>';
win.print();
win.close();
win.document.write(html); // You need to append the `html` in a single element
// Write it at once to a single win.document.write
Here is an example of injecting css via javascript.
(function(d, s, id) {
var css, icss = d.getElementsByTagName(s)[0] || d.getElementsByTagName('head')[0];
if (d.getElementById(id)) {
return;
}
css = d.createElement(s);
css.id = id;
css.href = "http://getbootstrap.com/dist/css/bootstrap.min.css";
css.rel = "stylesheet";
}(document, 'link', 'bootstrap'));
<html>
<head>
</head>
<body>
<button class="btn btn-success">normal button to bootstrap button by adding css</button>
</body>
</html>
if it's for printing with a new tab where you want to append content with css and then print, just go with there steps
var content = document.createTextNode("Some HTML content you want to print");
var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'text/css';
css.href = 'css url';
css.media = 'all';
printwindow.focus(); // if its a new tab where you want to do print operation, assuming printwindow is your new tab/popup opened by window.open()
printwindow.document.head.appendChild(css);
printwindow.document.body.appendChild(content);
printwindow.print();
printwindow.document.close();
Another possibility is to read the content of the stylesheet and write it directly into the HTML. Here an example using jQuery:
function print_area(){
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
$.get('main.css', function (data) {
console.log(data);
win.document.write('<html><head><title>my div</title><style>');
win.document.write(data);
win.document.write('</style></head><body >');
win.document.write('<div id="article_main_wrapper">My DIV</div>');
win.document.write('</body></html>');
win.print();
win.close();
});
}
I am using the following code for printing a div in a new window:
$('#PrintNews').bind('click', function () {
var approot = '<%=AppRoot %>';
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=800,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=250px,top=80px");
var doc = myWindow.document;
doc.open();
$(printContents).find("#PrintNews").remove();
$(printContents).find("#bottom").remove();
doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
doc.write("<html>");
doc.write("<head>");
doc.write("<link href='" + approot + "/Themes/print.css' rel='stylesheet' type='text/css' />");
doc.write("<link href='" + approot + "/Themes/secretaryPortal.css' rel='stylesheet' type='text/css' />");
doc.write("</head>");
doc.write("<body style='font: 11pt/1.2 Arial !important;'>");
doc.write("<div class='story'>");
doc.write($(printContents).html());
doc.write("</div>");
doc.write("</body>");
doc.write("</html>");
myWindow.document.close();
myWindow.focus();
myWindow.print();
myWindow.close();
});
});
It does open the print dialog But the page isn't with the original css.
if i change the 4 last lines to:
doc.document.close();
doc.focus();
doc.print();
doc.close();
It opens the page with the right CSS But the print dialog is not opened.
i get an error saying Uncaught TypeError: Cannot call method 'close' of undefined
I have to open it in a new window cause i need to re-size to print dialog, i am aware of #media print
in your description instead of :
doc.document.close();
doc.focus();
doc.print();
doc.close();
use:
myWindow.focus();
myWindow.print();
myWindow.close();
This is the final solution: *Thanks to Yussuf above
$('#PrintNews').bind('click', function () {
var approot = '<%=AppRoot %>';
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=800,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=250px,top=80px");
$(printContents).find("#PrintNews").remove();
$(printContents).find("#bottom").remove();
myWindow.document.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
myWindow.document.write("<html>");
myWindow.document.write("<head>");
myWindow.document.write("<link href='" + approot + "/Themes/print.css' rel='stylesheet' type='text/css' />");
myWindow.document.write("<link href='" + approot + "/Themes/secretaryPortal.css' rel='stylesheet' type='text/css' />");
myWindow.document.write("</head>");
myWindow.document.write("<body style='font: 11pt/1.2 Arial !important;'>");
myWindow.document.write("<div class='story'>");
myWindow.document.write($(printContents).html());
myWindow.document.write("</div>");
myWindow.document.write("</body>");
myWindow.document.write("</html>");
myWindow.focus();
myWindow.print();
myWindow.close();
});
I have the below code to print the text that is loaded in fancybox. It works perfect in chrome and firefox. But in ie9 it opens a blank window and closes. Then nothing happends.
jQuery(function($) {
$('a.print').click(function() {
var print_button = '';
var print_page = window.open('', 'Print', 'width=600,scrollbars=yes, height=700');
var html = '<h2><?php print t("Term & Condition"); ?></h2> <br/>' + '<?php echo $body_content; ?>';
print_page.document.open();
print_page.document.write(html);
print_page.print();
print_page.close();
return false;
});
});
Change the following:
print_page.document.write(html);
print_page.print();
into:
print_page.document.write(html);
print_page.document.close();
print_page.focus();
print_page.print();
JSFiddle.
Try adding <meta http-equiv="X-UA-Compatible" content="IE8"/> at head section so that the page renders in IE8 mode and check if it helps.
How to do that:
document.getElementById('target').innertHTML = "<script> alert(1); <script>";
<div id="target"></div>
script will be print on browser like a string.How to do is as script ?
I believe it is better to use pure DOM manipulation. Like this :
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.value = 'alert(1)';
document.getElementById('target').appendChild(s);
Just don't escape your < and >s:
document.getElementById('target').innertHTML = "<script> alert(1); <\/script>";
You cannot use innerHTML for scripts anymore. It won't work and the console will not show any error. Instead you dynamically add scripts.
This is for external scripts:
var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);
And this is for inline scripts:
var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript);
target.appendChild(newScript);
Credit to Daniel Crabtree
document.getElementById('target').innertHTML = '<script type="text/javascript"> alert(1); </script>';