How to print content inside a HTML div?

Asked

Viewed 87,966 times

44

I have a page and in it the content I want to print.

I created a Javascript command, but this command prints the whole page.

Is there any way to print only the contents of a div?

javascript css impression div

5 answers

45


Unable to select a div for printing with Javascript, because this is not a function of it. There is a solution that uses only CSS:

@media print {
  body * {
    visibility: hidden;
  }
  #printable, #printable * {
    visibility: visible;
  }
  #printable {
    position: fixed;
    left: 0;
    top: 0;
  }
}

Thus, only what is within this element printable in HTML will be displayed.

  • 1

    The last rule cannot be problematic if the #printable is inside another element already positioned? It would not be safer to use fixed?

  • 1

    Yes, you’re right, here I assumed that the element is not inside another with position: relative;. For this reason I edited my reply, thank you.

  • Wouldn’t it be better to replace #printable for .printable? He may need to assign this property to more than one element at some point.

  • @Calebeoliveira, in the question he asks "only a div". Even so, this method would not work for more than one div.

  • 2

    One pattern currently is to have a style sheet for the "print version" of the site and a standard sheet. This matches nicely with this response.

  • 1

    This solution does not work if you have content that gives more than one printout sheet!

Show 1 more comment

23

var conteudo = document.getElementById('sua_div').innerHTML,
    tela_impressao = window.open('about:blank');

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

This code must be executed only when triggering some mouse event, otherwise the popup blocker will block the action.

Works very well. Test!

Fiddle: http://jsfiddle.net/gFtUY/

  • Ok, but what if you want to preserve all the CSS that was loaded in the <head>?

  • @Slowaways In this case it is better to use css @media print, as the answer above

6

The solutions presented above are not as flexible.
They present at least one of the listed problems:

  • No support for printing large content that gives more than one sheet
  • Remove all CSS already processed

I present here my solution using jQuery:

JS Code:

function printBy(selector){
    var $print = $(selector)
        .clone()
        .addClass('print')
        .prependTo('body');

    // Stop JS execution
    window.print();

    // Remove div once printed
    $print.remove();
}

CSS style:

@media print {
    html, body {
        margin: 0;
        padding: 0;
        border: 0;
    }
    #printable {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 14px;
    }
    #printable ~ * {
        display: none;
    }
}

  • Perfect the solution! Thanks for sharing!!

5

In short:

<script>
function cont(){
   var conteudo = document.getElementById('print').innerHTML;
   tela_impressao = window.open('about:blank');
   tela_impressao.document.write(conteudo);
   tela_impressao.window.print();
   tela_impressao.window.close();
}
</script>

<div id="print" class="conteudo">
// conteúdo a ser impresso pode ser um form ou um table.
</div>

<input type="button" onclick="cont();" value="Imprimir Div separadamente">

3

  function printDiv(divID) {
        //pega o Html da DIV
        var divElements = document.getElementById(divID).innerHTML;
        //pega o HTML de toda tag Body
        var oldPage = document.body.innerHTML;

        //Alterna o body 
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";

        //Imprime o body atual
        window.print();

        //Retorna o conteudo original da página. 
        document.body.innerHTML = oldPage;

    }

And you can also use a pop-up.

    function printDiv(divID)  
    {
        var conteudo = document.getElementById(divID).innerHTML;  
        var win = window.open();  
        win.document.write(conteudo);  
        win.print();  
        win.close();//Fecha após a impressão.  
    }

  • Your first method may cause incompatibility if you use Javascript to control some elements or use third-party "widgets". Not to mention CSS would lose its styling.

  • Another formula that may work is to insert a white div over the entire page and insert the div you want to print into it. Preserving the rendered code.

Browser other questions tagged javascript css impression div

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