How to print only a part of HTML?

Asked

Viewed 2,107 times

2

To print a page I know I must use

<button onclick="window.print()">

What I need to know is how to print a DIV?

Ex:

<div id="divtoprint">
   //some code
</div>
javascript html

  • can specify further your question!

  • I need to print all the content that is in a particular DIV in the case of the div of the second example, I don’t want to print the content of the full page as this in the first example

3 answers

2

There are several ways to do this, some with Javascript, others with CSS only. A good way is to start with the simplest, as this solution only with CSS, posted by Bennett Mcelwee in the OS in English:

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

  • Have an example in JS?

  • @ayowoleagbedejobi com JS https://answall.com/a/819/3635

  • Only one question, using only the #section-to-print without the * no longer makes all child elements appear?

  • 1

    No, how everything was hidden with the body *, you need to undo this on all descendants of the div. @Laérciolopes

1

The function below will open a popup only with the content of div specified for printing, and will also apply the external CSS if there is:

Button to print with the id of div:

<button onclick="printDIV('divtoprint')">Imprimir</button>

Javascript:

function printDIV(i){
   var cssEstilos = '';
   var imp = window.open('', 'div', 'width='+window.innerWidth+',height='+window.innerWidth);

   var cSs = document.querySelectorAll("link[rel='stylesheet']");
   for(x=0;x<cSs.length;x++){
      cssEstilos += '<link rel="stylesheet" href="'+cSs[x].href+'">';
   }

   imp.document.write('<html><head><title>' + document.title  + '</title>');
   imp.document.write(cssEstilos+'</head><body>');
   imp.document.write(document.getElementById(i).innerHTML);
   imp.document.write('</body></html>');

   setTimeout(function(){
      imp.print();
      imp.close();
   },500);
}

Note: the tag <link> To load your external CSS you must have the attribute rel='stylesheet'. Ex.:

<link rel="stylesheet" href="estilo.css">

0

There are several ways to do this, since you want in Javascript, here is a simple example.

<body>
<div id="sua_div">Essa é a DIV</div>
<button id="btn">Clique para imprimir</button>

<script>
document.getElementById('btn').onclick = function() {
   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();
};
</script>
</body>

I hope I helped. Here is only a base, but can be improved.

  • 3

    That seemed to be quite the answer given here. You just copied and pasted?

  • Yes friend, I forgot to reference. some problem I will not invent the wheel if it is already invented.

  • On the site, there is the option to flag as duplicate just below the question. If you know an answer that already responds well to what you were asked, you can signal it. This will prevent content from being duplicated. It is not wrong to answer a duplicate question, as long as you generate some content that is not yet present on the site.

Browser other questions tagged javascript html

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