Home / Questions / 43444
Accepted
Pavlo B.
Asked: 2020-01-12 00:51:56 +0800 CST 2020-01-12 00:51:56 +0800 CST

Button to print (Only the content of a DIV) preserving styles

  • 772

i have a div

function imprSelec(historial){
  var ficha=document.getElementById(historial);
  var ventimp=window.open(' ','popimpr');
  ventimp.document.write(ficha.innerHTML);
  ventimp.document.close();
  ventimp.print();
  ventimp.close();
}
    <div id="historial">
      <h3><center>Mi contenido</center></h3>
      ...
    </div>
<a href="javascript:imprSelec('historial')">Imprimir</a>

And I want to print it, I've tried like this but it doesn't work for me, in fact it doesn't do anything. But I want only the content of the div to be printed, historialpreserving the styles of the div.

I add images:

This is how it looks on the web enter image description here

And this is how it looks, it's more or less fine since I've put the styles directly in the attribute, although the background colors don't work well for me.

enter image description here

javascript

2 Answers

  1. Best Answer

    Try this function:

    function printDiv(nombreDiv) {
     var contenido= document.getElementById(nombreDiv).innerHTML;
     var contenidoOriginal= document.body.innerHTML;

     document.body.innerHTML = contenido;

     window.print();

     document.body.innerHTML = contenidoOriginal;
}

    And calling it as follows:

    <div id="areaImprimir">
      <h3><center>Mi contenido</center></h3>
      ...
</div>

<input type="button" onclick="printDiv('areaImprimir')" value="imprimir div" />
    • 9

  2. Personally, I'm still looking for a cross browser solution to this problem. By default, styles are not considered when printing in most browsers. In the case of Chrome, I haven't even media="all"been able to get the styles to be preserved.

    I guess at some point this will be standardized, allowing printing with full CSS support. Meanwhile, we must find ways to emulate this task.

    One way to achieve this is to convert the document to canvas and then to an image (by default PNG) via HTMLCanvasElement#toDataURL. Once this is done, all you have to do is add the image to a tag <img>and print the document.

    The main problem is that there is no way to prevent the user from printing in the conventional way through the browser menu, so you must make sure to give a visible option at all times to print the content.

    I give you an example using the html2canvas library and the event keydownto intercept the combination Ctrl + pthat is a quick access to the browser's print option, so that we can prevent the default print and instead, let's do ours. Bootstrap is also used to see the quality of the rendering.

    document.addEventListener('keydown', function (e) {
  e.preventDefault();
  if (e.ctrlKey && e.key === 'p') {
    takeScreenshot(function (screenshot) {
      printPage(screenshot);
    });
  }
});

function printPage (screenshot) {
  var win = window.open('', 'prueba');
  win.document.write('<html>');
  win.document.write('<head></head>');
  win.document.write('<body>');
  win.document.write('<img src="' + screenshot + '"/>');
  win.document.write('</body>');
  win.document.write('</html>');
  win.print();
  win.close();
}

function takeScreenshot (cb) {
  html2canvas(document.getElementById('area'), {
    useCORS: true,
    onrendered: function (canvas) {
      var image = canvas.toDataURL();
      cb(image);
    }
  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div id="area" class="container">
    <div class="jumbotron">
      <h2>Ejemplo de impresión</h2>
    </div>
    <table class = "table table-striped table-bordered">
       <caption>Usuarios activos</caption>
       
       <thead>
          <tr>
             <th>Name</th>
             <th>City</th>
             <th>Pincode</th>
            <th>Delete</th>
          </tr>
       </thead>
       
       <tbody>
          <tr>
             <td>John Doe</td>
             <td>Bangalore</td>
             <td>560001</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
          
          <tr>
             <td>Lourdes Reitz</td>
             <td>Mumbai</td>
             <td>400003</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
          
          <tr>
             <td>Angela Spoya</td>
             <td>Pune</td>
             <td>411027</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
       </tbody>
    	
    </table>
    </div>

    The only thing you would have to do is make sure you have permissions for popups. This can be avoided by doing it in the same document, before calling window#printthe screenshot is put and the parent node is deleted, and after calling it, the node is put again. It may have some limitations if you are using reactive frameworks like React or Vue.

    Note : Apparently StackOverflow blocks popups in your editor. I have made a Pen so you can see it in operation.

    Support

    All browsers that implement Canvas :

    • IE 9+
    • Edge (all versions)
    • Firefox 3.6+
    • Chrome 4+
    • Safari 4+
    • Safari iOS 3.2+
    • Trade 10.1+
    • android browser 3+

    It's not perfect, but it's a lot better than the default print.

    • 1