我正在尝试使用“window.print()”在 wordpress 管理中仅打印一个 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>
它在浏览器中正确显示，但它只打印纯文本并且不显示顶部 Logo 。
最佳答案
使用 img 而不是内联样式的标志。然后使用该类在您的 CSS 文件中设置样式。
<img class="toplogo" src="https://www.agilsaude.com.br/wp-content/uploads/2013/09/logo_agilsaude3.png">
演示 JSFiddle
编辑 并且 brgprint 不是 ID，它是一个类，在您的 CSS 中您一直像 #brgprint 一样引用它，而您应该正在做 .brgprint，看看这个 JSFiddle，你会看到我把它变成了 HTML 中的一个 ID:http://jsfiddle.net/r5k4mxa2/1/
关于javascript - 在 wp-admin 中处理 css @print，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25308285/