CSS未應用於打印

Question

我做了什么

我正在處理生成和打印收據的應用程序。 為了進行打印，我創建了一個表格，對其進行樣式設置並進行打印。 我不想打印整個頁面，所以只選擇包含要打印的表格的div。

<script language="javascript" type="text/javascript">
    function printData() {


        var divToPrint = document.getElementById("inv");
        newWin = window.open("");
        newWin.document.write(divToPrint.outerHTML);
        newWin.print();
        newWin.close();

    }
</script>

問題

問題是，我無法使CSS從頁面保留到打印。

我嘗試了什么？

我已嘗試導入打印CSS頁面，如下所示，但它沒有做任何事情。 同樣在主文件中，如果我將<style>更改為<style media=print>則css將按預期方式從表中刪除，但不會應用於打印。

如果能指出正確的方向，將不勝感激。

問候

<link href='/Content/css/theme-print.css' rel='stylesheet' media="print" type='text/css' />
    <style>


    .invoice-box {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    font-size: 16px;
    line-height: 24px;
    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    color: #555;
    background-color:green;
    }

    .invoice-box table {
    width: 100%;
    line-height: inherit;
    text-align: left;
    }


        </style>
</head>
    <body >
    <div class="invoice-box" id="inv">
        <table style="background-color:blue" cellpadding="0" cellspacing="0" border="1" id="labelData" width:500px;>
            <tr class="top">
                <td colspan="2">
                    <table>
                        <tr>
                            <td class="title">
                                <img src="" style=" width:75px;">
                            </td>

                            <td>
                                Date Received :@Html.DisplayFor(model => model.hiddenDate)

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

主題print.css

@media print {

    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 16px;
        line-height: 24px;
        font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
        background-color: green;
    }

        .invoice-box table {
            width: 100%;
            line-height: inherit;
            text-align: left;
        }
}

Answer 1

在添加內容之前，您可以嘗試通過腳本將樣式表添加到newWin變量。

這是一個明確的示例：

newWin.document.write('<html><head><title>Print Page!</title><link rel="stylesheet" type="text/css" href="path-to-your.css"></head><body>');
newWin.document.write( divToPrint.outerHTML );
newWin.document.write('</body></html>');

CSS未應用於打印

問題描述

1 個解決方案

解決方案1
0 2017-04-17 02:53:19

CSS未應用於打印

問題描述

1 個解決方案

解決方案1 0 2017-04-17 02:53:19

解決方案1
0 2017-04-17 02:53:19