When attempting to use 'window.print()' to print only a specific div inside the WordPress admin area, I tried enqueueing CSS to load on the desired page and hide all elements except for the target div. However, the issue arises when the text formatting and background image are missing from the print preview.
Here is the CSS code:
#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%;
}
}
The specific div intended for printing:
<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>
While it displays correctly in the browser, the printed output shows plain-text without the top logo.