Print only part of an HTML page

Asked

Viewed 1,589 times

0

I am trying to print only the part of an HTML page that has a barcode. HTML:

<div class="barcode-img">
            <svg id="barcode"
                 jsbarcode-textmargin="0"
                 jsbarcode-fontoptions="bold"
                 style="width: 30%; height: 30%;">
            </svg>

            <script>
                JsBarcode("#barcode", "<?php echo $bar_number; ?>", {
                    format: "ean13",
                    width: 3
                });
            </script>
</div>

CSS:

@media print {
body * {
    visibility: hidden;
}

#barcode, #barcode *{
    visibility: visible;
}

#barcode
{
    position: fixed;
    left: 0px;
    top: 0px;
}

I have seen in many places similar solutions to this, but by doing so my barcode appears twice, or more, on the print page.

Imagery: inserir a descrição da imagem aqui

How to solve this problem?

javascript html css

  • I tried the way I say there, and I got this picture problem

  • Test Gabriel’s response. He picks up the contents of a certain div, writes a blank doc and just prints it out. That’s what you need. =)

  • It didn’t work either, doing the way he said the picture doesn’t even show up

1 answer

2


var conteudo = document.getElementById('barcode').innerHTML;
var telaImpressao = window.open('about:blank');

telaImpressao.document.write(conteudo);
telaImpressao.window.print();
telaImpressao.window.close();

This answer is available here

You copy the contents of your div to a new page and print it out.

  • I was just trying with the picture, with the whole div worked :)

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.