0
138
ViewsJavascript not printing DIV stylesheet background image
I am trying to print a div using javascript but it's not printing the css background images. Here is my code. I would like to print the div with it's properties. Thanks. Any help is highly appreciated.
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="IDCard.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>
<input type="button" id="btnPrint" value="Print" />
<div class="container" id="dvContents">
<div class="padding">
<div class="font">
SOME CONTENT HERE
</div>
</div>
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
Often browsers will not print backgrounds by default.
When you are in your browser's print you will probably find an option to print backgrounds.
On my Edge on Windows 10 looking at this page this is what I found (needed to scroll down and select 'More Options').
There is a checkbox to select background printing.
·
Juan Pablo Isaza
Report
Answer question