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（斜体表示应用背景图像的2行）：

@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

可能您可以缓存这些图像并将其隐藏在打印按钮页面中，而不是使用超时

Images not appearing in print preview - Chrome

Answer 2

解决方案相对简单：用包含相同图像的background标签替换CSS <img>属性。例如：

此CSS消失

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

..并由HTML + CSS取代

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

加上CSS：

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

但是，我仍然不知道为什么我原来的方法不能用于第一个电话。

Window.print（）仅在第二次通话时显示所有内容

2 个答案: