Window.print（）僅在第二次調用時顯示所有內容

Question

在我的網頁中，我有一個按鈕，可以使用window.print() JavaScript方法打印所選內容。 我的功能很簡單：

function HTMLtoPDF()
{
    window.print();
}

使用onclick="HTMLtoPDF()"調用該按鈕。 奇怪的是，第一次調用window.print()打印@media print類型（在我的print.css文件中-請在下面檢查其內容）中定義的所有內容， 除了我用作背景的2張圖像我的復選框。 但是，當我第二次調用window.print()時，一切都正確顯示。 通過在Chrome的控制台上單擊按鈕或調用window.print()函數，都會發生此行為：僅在第二次調用時，所有內容均正確顯示。

但是，如果我使用Chrome's Dev Tools -> More tools -> Rendering -> Emulate CSS media -> print選項，則所有內容都會立即正確顯示。

以下是為第一個和第二個調用生成的PDF：

1.第一次打印（不正確）

2.第二次打印（正確）

我以為問題可能是window.print()執行得太早並且某些東西被丟棄了（因為渲染太快了），所以我通過將setTimeout()最多增加了5000ms（在調用window.print()進行了一些測試。 ），沒有運氣。

有人對此有暗示嗎？ 當然，如果需要的話，我當然可以發布一些涉及的JS代碼，只是從一開始就盡量不要過多地填充問題。

print.css（斜體表示應用背景圖像的兩行）：

@media print
{
    * {
        -webkit-transition: none !important;
        transition: none !important;
      }

    .example-screen
    {
       display: none;
    }

    #ConteudoCentral
    {
        height: 99%!important;
    }

    .example-print
    {
        display: block;   
    } 

    div.topo
    {
        display: fixed;
        margin-right:20px;
        top: 0;
        margin-bottom: 20px!important
    }

    div.rodape
    {
        margin-right:20px;
        bottom: 0;
        margin-top: 20px!important;
        display: fixed;
    }

    @page :left
    {
        margin: 1cm;
    }

    @page :right
    {
        margin: 1cm;
    }

    @page :top
    {
        margin: 1cm;
    }

    @page :bottom
    {
        margin: 1cm;
    }

    br
    {
        display: block;
        margin: 0px!important;
        content: " ";
        line-height: 0px!important;
    }

    #tituloOrdemServico
    {
        text-transform: uppercase;
        margin-top: 0px;
    }

    .tipoDominio_pdf
    {
        text-transform: uppercase;
        overflow-wrap: break-word;
        color: #04378b!important;
        font-size: 11px;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        -webkit-print-color-adjust: exact;
    }

    .periodo_pdf
    {
        text-transform: lowercase;
        overflow-wrap: break-word;
        color: #04378b!important;
        font-size: 10px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
    }

    .dadosGerais_pdf
    {
        text-transform: uppercase;
        overflow-wrap: break-word;
        color: #000!important;
        font-size: 9px;
        border-bottom: 1px #000 solid;
        display: block;
        line-height: 9px;
        margin-top: 9px;
        padding-left: 5px;
        padding-right: 5px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        padding-bottom: 2px;
    }

    .detalhes_dadosGerais_pdf
    {
        overflow-wrap:
        break-word;
        color: #000!important;
        font-size: 9px;
        border-bottom: 1px #000 solid;
        display: block;
        line-height: 9px;
        margin-top: 9px;
        padding-left: 5px;
        padding-right: 5px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        padding-bottom: 2px;
    }

    .bold_pdf
    {
        font-weight: bold;
    }

    .quebraSpan
    {
        display: grid;
    }

    .barra_azul
    {
        background: #04378b!important;
        color: #fff!important;
        margin-left: 0px;
        margin-right: 0px;
        line-height: 17px;
        border-bottom: none;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
        font-weight: bold;
    }

    .subTitulos_pdf
    {
        margin-top: 10px;margin-left: 10px;font-size: 9px;
    }

    .textRight15
    {
        padding-right: 15px;
        text-align: right;
    }

    .tituloChecklist
    {
        vertical-align: top;
    }

    .checkbox_text_pdf
    {
        font-size: 9px;
        line-height: initial;
    }

    .checkbox_black
    {
        white-space: normal;
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: 0;
        /*margin-top: 5%;*/
        vertical-align: middle;
        *background: url(../resources/imgs/ic_check_box_outline_24px_black.svg) left top no-repeat !important;*
        background-size: 50% 50% !important;
        cursor: pointer;
        float: left;
    }

    .selected_black
    {
        *background: url(../resources/imgs/ic_check_box_24px_black.svg) left top no-repeat !important;*
        background-size: 50% 50% !important;
    }

    .lineHeightNormal
    {
        line-height: normal;
    }

    .marginleft20
    {
        margin-left: 20px;
    }

    .marginleft10
    {
        margin-left: 10px;
    }

    .marginleft30
    {
        margin-left: 30px!important;
    }

    .marginleft0
    {
        margin-left: 0px;
    }

    .paddingright30
    {
        padding-right: 30px!important;
    }

    .marginbottom15
    {
        margin-bottom: 15px;
    }

    .empty_row
    {
        /*margin-top: 18px!important;*/
        height: 12px;
    }

    .rodape_pdf
    {
        overflow-wrap: break-word;
        color: #000!important;
        font-size: 8px;
        line-height: 8px;
        margin-top: 8px;
        padding-left: 5px;
        -webkit-print-color-adjust: exact;
        font-family: Tahoma, Verdana, Segoe, sans-serif;
    }

    .col_1_3
    {
        width: 200px;
    }

    .col_2_3
    {
        width: 500px;
        margin-left: 15px;
    }

    .col_3_3
    {
        width: 715px;
    }

    .linha
    {
        margin-top: 9px;
        display: flex;
    }
}

Answer 1

可能您可以緩存這些圖像並將其隱藏在“打印”按鈕頁面中，而不是使用超時

圖像未出現在打印預覽中-Chrome

Answer 2

解決方案相對簡單：將CSS background屬性替換為包含相同圖像的<img>標簽。 例如：

該CSS消失了

.selected_black
{
    background: url(../resources/imgs/ic_check_box_24px_black.svg) left top no-repeat !important;
    background-size: 50% 50% !important;
}

..and替換為HTML + CSS

<img src="/resources/imgs/ic_check_box_24px_black.svg">

加上CSS：

.selected_black img
{
    width: 50%;
    height: 50%;
    vertical-align: top;
}

但是，我仍然不知道為什么我原來的方法不能用於第一個電話。