Media print css not working in IE11 print preview
Question
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
3 answers
solution1
2 2015-10-20 20:37:20
I 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 community, here is a solution. I hope this helps anyone, too.
solution2
0 2018-12-06 07:24:56
use this
@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
css here
}
solution3
0 2020-10-07 14:12:00
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.