html - 打印预览中未显示媒体打印 CSS 问题

Question

我有一个打印特定布局，有助于显示为收据。布局如下。

<!-- Receipts Print Screen Specific Layout -->
<div id="receiptsPrintScreenWrapper" class="row">
    <div class="row">
        <div class="col col-md-3"></div>
        <div class="col col-md-6">
            <img class="receiptsLogo" src="./assets/imgs/sfc.gif" />
        </div>
        <div class="col col-md-3"></div>
    </div>
    <div id="staticReceiptsInfo" class="row text-center">
        <div class="col col-md-3"></div>
        <div class="col col-md-6">
            <p>XXXXXXXXXXXXXXXXXXXXXX</p>
            <p>XXXXXXXXXXXXXXXXXXXXXX</p>
            <p>XXXXXXXXXXXXXXXXXXXXXX</p>
        </div>
        <div class="col col-md-3 text-right">
            <p>XXXXXXXXXXXXXXXXXXXXXX</p>
            <p>XXXXXXXXXXXXXXXXXXXXXX</p>
        </div>
    </div>
    <div id="receiptsContentArea" class="row text-left">
        <div class="col-md-9">
            <p>XXXXXXXXXXXXXXX <span style="margin-left: 20px;">:</span></p>
            <p>XXXXXXXXXXXXXXX <span style="margin-left: 56px;">:</span></p>
            <p>XXXXXXXXXXXXXXX <span style="margin-left: 54px;">:</span></p>
        </div>
        <div id="receiptsRightInfo" class="col-md-3 text-left">
            <p><strong>XXXXXXXXXXXXXXX</strong>: {{XXXXXXXXXXXXXXX}}</p>
            <p><strong>XXXXXXXXXXXXXXX</strong>&nbsp;&nbsp;&nbsp;&nbsp;: {{XXXXXXXXXXXXXXX}}</p>
        </div>
    </div>
    <div id="firstBottomReceiptsSection" class="row">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>XXXXXXXXXXXXXXX</th>
                    <th>XXXXXXXXXXXXXXX</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>XXXXXXXXXXXXXXX</td>
                    <td></td>
                </tr>
                <tr>
                    <td>XXXXXXXXXXXXXXX</td>
                    <td></td>
                </tr>
                <tr>
                    <td>XXXXXXXXXXXXXXX</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="footer" class="row">
        <p class="pull-right">XXXXXXXXXXXXXXX. <span class="extraLargeText"><strong>XXXXXXXXXXXXXXX.</strong></span></p>
        <p class="extraSmallText">XXXXXXXXXXXXXXX.</p>
    </div>
</div>

============================================= ========================具体到这里的CSS是这样的。

/* CSS For Receipts print screen */
@media print {
    body {
        background: #000;
        color: #000;
        font-size: 8pt;
        line-height: 150%;
        margin: 0px;
    }

    hr {
        color: #ccc;
        background-color: #ccc;
    }

    h1, h2, h3, h4, h5, h6, code, pre {
        color: #000;
        text-transform: none;
    }

    h1 {
        font-size: 11pt;
        margin-top: 1em;
    }

    h2 {
        font-size: 10pt;
    }

    h3 {
        font-size: 9pt;
    }

    h4, h5, h6 {
        font-size: 8pt;
    }

    code, pre {
        font-size: 8pt;
        background-color: transparent;
    }

    blockquote {
        background-image: none;
    }

    a:link, a:visited {
        text-decoration: underline;
        color: #000;
    }

    abbr:after, acronym:after {
        content: " (" attr(title) ") ";
    }

    #header, #left-panel, #ribbon, #content, .modal, .page-footer { display: none; }

    #receiptsPrintScreenWrapper {
        min-height: 550px;
        height: auto;
        width: 95%;
        background-color: #fff;
        display: block !important;
        float: left;
        margin-left: 25px;
        padding: 20px;
    }
    #staticReceiptsInfo {
        position: relative;
        top: -20px
    }
    #receiptsRightInfo { padding-left: 40px; }
    #firstBottomReceiptsSection {
        margin-top: 5px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .receiptsLogo { width: 100%; }
    .extraSmallText {
        font-size: 10px;
        margin-left: 15px;
    }
    .extraLargeText {
        font-size: 15px !important;
        margin-right: 15px;
    }
}

============================================= ==

在我的 html 文件中，作为文件包含，我已经这样指定了。

<link rel="stylesheet" media="all" href="assets/css/print.css"/>

早些时候它是 media="print"但是，因为它没有给我任何结果，所以我将它更改为 media="all"。

任何人都可以给我一些关于这个打印问题的提示吗？尝试获取打印预览时未显示整个布局。

谢谢....

Answer 1

这不是真正的解决方案，而是我用于我的网站的解决方法:

let firstPrint = true; //first time printing
function printCV() {
    if (firstPrint) {
        window.print();
        firstPrint = false;
    }
    setTimeout('window.print()', 500);
}