Is there a way to print a specific div while preserving its CSS styles? I am currently using both bootstrape.css and mycss.css for styling, but when I try to print the content, all CSS disappears. Here is my current implementation:
function printProfile(){
var contents = $("#profileContent").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();
frameDoc.document.write('<html><head><title>Profile Contents</title>');
frameDoc.document.write('<link href="css/bootstrape.min.css" rel="stylesheet" type="text/css" />');
frameDoc.document.write('<link href="css/mycss.css" rel="stylesheet" type="text/css" />');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 100);
}
I seem to be missing something in this code. What could it be?