I've a page with css applied. To customize the print, in the same css file I have some @media print styles. These work perfectly fine when performing the print but, testing with IE11, I've realized that the preview works as if the media print styles weren't considered. If, on the other hand, I define a brand new css style and I link it as a print stylesheet, then also the preview works fine (however this impose me to duplicate in this css lots of styles defined in the normal css stylesheet, that I don't want to change in the print).
I don't know if it can be of any help but the way I print the page is by calling a javascript function which selects just the content of a div in my html page (#content) and it prints it (also adding a copyright notice and a logo to the bottom of the printed page)
function printit() {
var body = document.getElementById('content').innerHTML;
var tmpWin = window.open('', '', 'width=640,height=480');
tmpWin.document.open("text/html");
tmpWin.document
.write("<html><head><link rel='stylesheet' href='css/stylesheet.css'></head><body>");
tmpWin.document.write(body);
//we add the copyright notice
tmpWin.document.write("<div id='footer'><p>© <script>document.write(new Date().getFullYear())</script> - All rights reserved</p><img id='logo_vertical' alt='DCL' src='img/logo_vertical.png'></div>")
tmpWin.document.write("</body></html>");
tmpWin.document.close();
tmpWin.print();
tmpWin.close();
}
Any idea why I'm having this problem?
Thanks
I've a page with css applied. To customize the print, in the same css file I have some @media print styles. These work perfectly fine when performing the print but, testing with IE11, I've realized that the preview works as if the media print styles weren't considered. If, on the other hand, I define a brand new css style and I link it as a print stylesheet, then also the preview works fine (however this impose me to duplicate in this css lots of styles defined in the normal css stylesheet, that I don't want to change in the print).
I don't know if it can be of any help but the way I print the page is by calling a javascript function which selects just the content of a div in my html page (#content) and it prints it (also adding a copyright notice and a logo to the bottom of the printed page)
function printit() {
var body = document.getElementById('content').innerHTML;
var tmpWin = window.open('', '', 'width=640,height=480');
tmpWin.document.open("text/html");
tmpWin.document
.write("<html><head><link rel='stylesheet' href='css/stylesheet.css'></head><body>");
tmpWin.document.write(body);
//we add the copyright notice
tmpWin.document.write("<div id='footer'><p>© <script>document.write(new Date().getFullYear())</script> - All rights reserved</p><img id='logo_vertical' alt='DCL' src='img/logo_vertical.png'></div>")
tmpWin.document.write("</body></html>");
tmpWin.document.close();
tmpWin.print();
tmpWin.close();
}
Any idea why I'm having this problem?
Thanks
Share Improve this question asked Nov 5, 2014 at 0:08 miks87miks87 1931 gold badge5 silver badges16 bronze badges 1- Have you find any other sollution? – Erick Sperandio Commented Mar 20, 2017 at 22:56
3 Answers
Reset to default 2I saw your question, but without any answers. I was having this same problem in IE 11 using ExtJS 4.2.2, and I couldn't easily find a solution for it.
It seems that IE 11 is fitting the window content using the entire page as reference, not only the window, as was expected to do. If you use Print Preview you can check this behavior.
After digging a lot, testing many workarounds, I finally managed to get a working solution. In my case, what I needed to do was to modify the printing script, as follows:
<div id="print">
<button type="button" onclick="document.execCommand('print', false, null);">Print</button>
</div>
In your case, the code below should work (instead of tmpWin.print()):
tmpWin.document.execCommand('print', false, null);
As you can see, "document.execCommand" is used instead the classic "window.print" function.
I know it has been almost a year since you posted it, and I imagine that you have already got it working. However, for the sake of the munity, here is a solution. I hope this helps anyone, too.
I added my css styles in
@media print { //css here }
then make sure that "Print Background colors and Images" is checked in print setting on IE to be able to apply your styles (colors and backgrounds) for printed pages
use this
@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
css here
}