Im trying to print a dashboard. I have setup a container with an id to be able todo so.
The printing does work, but it ends up ignoring all set styles and also the Grid layout.
How can I get it to print with the Bootstrap grid and styling?
Styles are located in a separate css file.
printDashboard(){
let printContents = document.getElementById('dashboard_container').innerHTML;
let w = window.open();
w.document.write(printContents);
w.print();
w.close();
},
Here is a solution.
You can include the file from an external location.
Then set a timeout before printing to give the styles a chance to be implemented.
printDashboard(){
let printContents = document.getElementById('dashboard_container').innerHTML;
let w = window.open();
w.document.write('<link rel="stylesheet" href="./css/app.css" type="text/css" />');
w.document.write(printContents);
setTimeout(function(){w.print();},1000);
w.print();
w.close();
},
Related
I have a very strange problem where, when I call $window.print in angularjs, all I see is the date on the top left, page name on the top, page number on the bottom right, and the url on the bottom left. However, there is no other content on the page, which is very weird since the regular page has plenty of content.
I guess of mine is that this has to do with an ng-view I have on the page, but I'm not too sure. I would add a print style sheet, but my problem is more on the side that there is no content to style to begin with. Any ideas?
Try to use(don't forget to inject service $timeout):
$timeout(function() {
$window.print();
})
I think your problem in that angular haven't finishes the digest cycle and updates the DOM.
Use this to print a particular div content.
$scope.printDiv = function(divName) {
var printContents = document.getElementById(divName).innerHTML;
var popupWin = window.open('', '_blank', 'width=300,height=300');
popupWin.document.open()
popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
popupWin.document.close();
}
I am trying to copy a div to a new window for printing, That's working fine
but the div his copied without any style attached to it.
$('#PrintNews').bind('click', function () {
var printContents = new $("#divToPrint").clone();
var myWindow = window.open("", "popup", "width=1000,height=600,scrollbars=yes,resizable=yes," +
"toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0");
var doc = myWindow.document;
doc.open();
$(printContents).find("#PrintNews").remove();
doc.write($(printContents).html());
doc.document.close();
doc.focus();
doc.print();
doc.close();
});
});
How can i open that div in a new window for printing, but with all of his styles like in the original div?
you should build the html of new window something like this, to link extarnal css files.
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='/css/print.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
doc.write("</head>");
doc.write("<body>");
doc.write($(printContents).html());
doc.write("</body>");
doc.write("</html>");
It's because styles had not been loaded before printing.
var showPrintWindow = function (context) {
var printWindow = window.open('', '');
var doc = printWindow.document;
doc.write("<html><head>");
doc.write("<link href='/css/printReport.css' rel='stylesheet' type='text/css' media='print' />");
doc.write("</head><body>");
doc.write(context);
doc.write("</body></html>");
doc.close();
function show() {
if (doc.readyState === "complete") {
printWindow.focus();
printWindow.print();
printWindow.close();
} else {
setTimeout(show, 100);
}
};
show();
};
It depends on the way the div is styled. If the styles are applied based on the ID or class then you should be fine to just include the same stylesheet in the new window. However if any of the styles are based on the element's ancestors then it becomes tricky as you would have to copy the ancestral elements in order for the exact styles to be applied.
It sounds like you ought to be using print-specific styles. You can apply a stylesheet to print only by including the media="print" attribute on the stylesheet link. This stylesheet is then responsible for hiding any elements in the page that you don't want to print and positioning the ones that you do. This way you are not subject to popup blockers and give the user one less step to print the document.
You can achieve the same by using media queries in your original stylesheet. Here is a very simple example:
#media print {
.print {width:100%;}
.noPrint {display:none;}
}
To test this just remove the #media wrapper and see how it looks in your browser. It should give you a pretty good idea of how the page will look on paper.
Include external css into the window to which you are copying your DIV. otherwise only the inline styles will be copied.
How do I put an image on a pop-up window and link it to a CSS file? Let's say I want to insert an image called big.jpg on my computer. Can this be done by simple Javascript code?
popupWindow.document.writeln('<html><head>');
popupWindow.document.writeln('<link rel="stylesheet" type="text/css" href="tressider.css" />');
popupWindow.document.writeln('</head><body>');
popupWindow.document.writeln('<h2 class="pp">'+help[3].office+'</h2>');
popupWindow.document.writeln('<p></p>');
popupWindow.document.writeln('<h3 >'+'725-0911'+'</h3>');
popupWindow.document.writeln('<p></p>');
popupWindow.document.writeln('<div class="wocao">'+help[3].Description+'</div>');
popupWindow.document.writeln('</body></html>');
popupWindow.document.bgColor="White";
popupWindow.focus();
popupWindow.document.close();
Yes this can easily be done by adding style and img elements into the window directly.
Just use:
var _image = popupWindow.document.createElement('img');
_image.setAttribute('width',#);
_image.setAttribute('height',#);
_image.setAttribute('src',"myimg.png");
popupWindow.document.appendChild(_image);
And do the same for the style tag.
var _style = popupWindow.document.createElement('img');
_style.setAttribute('src',"mystyle.css");
popupWindow.document.appendChild(_style);
I am trying to print a report which includes text and images. I am using a javascript function to invoke the print functionality. Everything works well except the images on the page do not show up in the new print window. I have included all the CSS files with it but still my images dont appear in the new print window. Its the same even if I dont include the CSS links.
My javascript function to print is :
function printfun(){
var disp_setting = "toolbar=no,location=no,directories=no,menubar=no,";
disp_setting += "scrollbars=no,left=0,top=0,resizable=yes,width=900 height=650,modal=yes,";
var content_vlue = document.getElementById('<%= tblCharts.ClientID %>').innerHTML;
var docprint = window.open("", "", disp_setting);
docprint.document.write('<html><head>');
docprint.document.write('</head>');
docprint.document.write('<body onLoad="self.print()">');
docprint.document.title = "";
docprint.document.write('<link href="../style/design.css" rel="Stylesheet" type="text/css" />');
docprint.document.write('<link href="../App_Themes/style/graphs.css" rel="Stylesheet" type="text/css" />');
docprint.document.write(content_vlue);
docprint.document.write(tblCharts);
docprint.document.write("</body></html>");
docprint.document.close();
docprint.focus();
}
Are the images background images in the CSS? If so, the browser likely isn't set to print those by default. That'd a browser setting the user would have to change.
I'm working with a CMS, which prevents editing HTML source for <head> element.
For example I want to add the following above the <title> tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
You can select it and add to it as normal:
$('head').append('<link />');
JavaScript:
document.getElementsByTagName('head')[0].appendChild( ... );
Make DOM element like so:
const link = document.createElement('link');
link.href = 'href';
link.rel = 'rel';
document.getElementsByTagName('head')[0].appendChild(link);
jQuery
$('head').append( ... );
JavaScript:
document.getElementsByTagName('head')[0].appendChild( ... );
You can use innerHTML to just concat the extra field string;
document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'
However, you can't guarantee that the extra things you add to the head will be recognised by the browser after the first load, and it's possible you will get a FOUC (flash of unstyled content) as the extra stylesheets are loaded.
I haven't looked at the API in years, but you could also use document.write, which is what was designed for this sort of action. However, this would require you to block the page from rendering until your initial AJAX request has completed.
In the latest browsers (IE9+) you can also use document.head:
Example:
var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';
document.head.appendChild(favicon);
Create a temporary element (e. g. DIV), assign your HTML code to its innerHTML property, and then append its child nodes to the HEAD element one by one. For example, like this:
var temp = document.createElement('div');
temp.innerHTML = '<link rel="stylesheet" href="example.css" />'
+ '<script src="foobar.js"><\/script> ';
var head = document.head;
while (temp.firstChild) {
head.appendChild(temp.firstChild);
}
Compared with rewriting entire HEAD contents via its innerHTML, this wouldn’t affect existing child elements of the HEAD element in any way.
Note that scripts inserted this way are apparently not executed automatically, while styles are applied successfully. So if you need scripts to be executed, you should load JS files using Ajax and then execute their contents using eval().
Try a javascript pure:
Library JS:
appendHtml = function(element, html) {
var div = document.createElement('div');
div.innerHTML = html;
while (div.children.length > 0) {
element.appendChild(div.children[0]);
}
}
Type:
appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');
or jQuery:
$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));
With jquery you have other option:
$('head').html($('head').html() + '...');
anyway it is working. JavaScript option others said, thats correct too.