Question

我正在尝试使用'window.print（）'在wordpress admin中打印一个div。我可以将css排入队列，只是加载我想要的页面，并隐藏所有元素，但我要打印的div。问题是文本格式化和图像背景不在打印预览中 css：

#brgprint .toplogo{
        background-image: url(https://www.agilsaude.com.br/wp-content/uploads/2013/09/logo_agilsaude3.png);
        width:100px;
        height:60px;
        margin:auto;
    }
    #brgprint p.assinatura{
        width:200px;
        margin: 20px auto;
        border-top: 1px black;
    }
@media print {
    #adminmenuback, #adminmenuwrap, #wpfooter, #wpbody-content .update-nag, #contextual-help-link-wrap, #wpbody-content .wrap h2, #woo_vou_check_voucher_code_container .handlediv, #woo_vou_check_voucher_code_container h3, .woo-vou-check-code tbody tr, .woo-vou-voucher-code-submit-wrap .button-primary {display:none}
    #brgprint {width:100%!important;margin:0!important;
    display:block!important;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width: 640px;
    }
    #brgprint .toplogo{
        display:block!important;
        background-image: url(https://www.agilsaude.com.br/wp-content/uploads/2013/09/logo_agilsaude3.png)!important;
        width:100px!important;
        height:60px!important;
        margin:auto!important;
    }
    #brgprint p.assinatura{
        width:200px!important;
        margin: 20px auto!important;
        border-top: 1px black!important;
    }
    #wpwrap, #wpcontent, #wpbody, #wpbody-content, #woo_vou_check_voucher_code_wrap.post-box-container,     #woo_vou_check_voucher_code_container.postbox, #woo_vou_check_voucher_code_container.postbox.inside, tr.woo-vou-voucher-code-submit-wrap, tr.woo-vou-voucher-code-submit-wrap td {
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    width:100%;
    }
}

我要打印的div：

<div class="brgprint">
  <div class="toplogo" style="background-image: url(https://www.agilsaude.com.br/wp-content/uploads/2013/09/logo_agilsaude3.png);width:100px;height:60px;margin:auto;display:block;float:none;"></div>
  <h2 style:"text-align:center"="">Declaração de atendimento</h2>
  <p>Declaro que o cliente Helder Lima, portador do CPF , na presente data está realizando o atendimento do produto e/ou serviço Teste de Voucher na clínica e/ou profissional Agil Saude.</p><p> Receberei o valor de R$ 100 pela prestação de serviços.</p><p>14 / 08 / 2014</p>
  <p style="width:200px;margin: 20px auto;border-top: 1px;">Assinatura</p></div>

它在浏览器中正确显示，但它只打印纯文本而顶部徽标未显示。

Answer 1

使用img代替内联样式徽标。然后使用类在CSS文件中设置样式。

<img class="toplogo" src="https://www.agilsaude.com.br/wp-content/uploads/2013/09/logo_agilsaude3.png">

DEMO JSFiddle

编辑并且brgprint不是一个ID，它是一个类，在你的CSS中，你应该像#brgprint那样继续引用它.brgprint ，看看这个JSFiddle，你会看到我把它改成了HTML中的ID：http://jsfiddle.net/r5k4mxa2/1/

在wp-admin中处理css @print

1 个答案: