媒體打印 css 在 IE11 打印預覽中不起作用

Question

我有一個應用了 css 的頁面。 要自定義打印，在同一個 css 文件中我有一些 @media 打印樣式。 這些在執行打印時工作得非常好，但是，使用 IE11 進行測試時，我意識到預覽的工作方式就好像沒有考慮媒體打印樣式一樣。 另一方面，如果我定義了一個全新的 css 樣式並將其鏈接為打印樣式表，那么預覽也可以正常工作（但是這迫使我在這個 css 中復制許多在普通 css 樣式表中定義的樣式，即我不想改變印刷品）。

我不知道它是否有任何幫助，但我打印頁面的方式是調用一個 javascript 函數，該函數僅選擇我的 html 頁面 (#content) 中 div 的內容並打印它（還添加了版權通知和打印頁面底部的徽標）

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>&copy; <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();
}

知道為什么我會遇到這個問題嗎？

謝謝

Answer 1

我看到了你的問題，但沒有任何答案。 我在使用 ExtJS 4.2.2 的 IE 11 中遇到了同樣的問題，我無法輕松找到解決方案。

似乎 IE 11 正在使用整個頁面作為參考來擬合窗口內容，而不僅僅是窗口，正如預期的那樣。 如果您使用打印預覽，您可以檢查此行為。

經過大量挖掘，測試了許多解決方法，我終於找到了一個可行的解決方案。 就我而言，我需要做的是修改打印腳本，如下所示：

 <div id="print">
        <button type="button" onclick="document.execCommand('print', false, null);">Print</button>
 </div>

在您的情況下，下面的代碼應該可以工作（而不是 tmpWin.print()）：

tmpWin.document.execCommand('print', false, null);

如您所見，使用“document.execCommand”代替經典的“window.print”函數。

我知道你發布它已經快一年了，我想你已經讓它工作了。 但是，為了社區着想，這里有一個解決方案。 我希望這也能幫助任何人。

Answer 2

用這個

@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 css here
}

Answer 3

我添加了我的 css 樣式

@media print { //這里的css }

然后確保在 IE 上的打印設置中選中“打印背景顏色和圖像”，以便能夠將您的樣式（顏色和背景）應用於打印頁面

媒體打印 css 在 IE11 打印預覽中不起作用

問題描述

3 個解決方案

解決方案1
2 2015-10-20 20:37:20

解決方案2
0 2018-12-06 07:24:56

解決方案3
0 2020-10-07 14:12:00

媒體打印 css 在 IE11 打印預覽中不起作用

問題描述

3 個解決方案

解決方案1 2 2015-10-20 20:37:20

解決方案2 0 2018-12-06 07:24:56

解決方案3 0 2020-10-07 14:12:00

解決方案1
2 2015-10-20 20:37:20

解決方案2
0 2018-12-06 07:24:56

解決方案3
0 2020-10-07 14:12:00