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 个答案: