1 votes

How do I print a specific area with javascript?

I come to you because I have problems printing a specific area with javascript, good happens that I want to print a modal in which you will find a model of sales report, so that when a click on the button I open a new window on another page "_blank" with the data to print...

I have two buttons that works for me called "print 1" and "print 2" in the case of print 1 I get the data properly but after print I close the window and I do not work the buttons which should I reload again the page and that I do not wish to, and in the case of the button print 2 if I work and open in another page but the problem is that I do not get the styles such as the button print 1...

How could I fix these problems ? here is my code..

$(document).ready(function() {
  $('#example').DataTable();
  $("#imprimir").on('click', function() {
    var contenido = document.getElementById("impri").innerHTML;
    var contenidoOriginal = document.body.innerHTML;
    document.body.innerHTML = contenido;
    window.print();
    document.body.innerHTML = contenidoOriginal;
  });
  $("#btn").on('click', function() {
    var conteudo = document.getElementById('impri').innerHTML,
      tela_impressao = window.open('_blank');
    tela_impressao.document.write(conteudo);
    tela_impressao.window.print();
    tela_impressao.window.close();
  });
});
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet">

	    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
</head>

<body>
  <br><br>
  <div class="container">
    <button id="imprimir" class="btn btn-success">
            Print 1
        </button>
    <button id="btn" class="btn btn-info">
            Print 2
        </button>
    <br><br>
    <div id="impri">
      <table class="table table-striped table-bordered" id="example" style="width:100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

1voto

cignius Points 844

For the first problem the solution is to tell it that you have to click on the document and hence the id

$(document).on('click', '#imprimir', function()

The second issue is because when you create a new page with _blank, does not pass the styles, and other. Solution:

    function printDiv(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var document_html = window.open("_blank");
             document_html.document.write( "<html><head><title></title>" );
             document_html.document.write( "<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" type=\"text/css\"/>" );
             document_html.document.write( "<link rel=\"stylesheet\" href=\"https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css\" type=\"text/css\"/>" );
             document_html.document.write( "</head><body>" );
             document_html.document.write( printContents );
             document_html.document.write( "</body></html>" );
             setTimeout(function () {
                   document_html.print();
               }, 500)
}

The way to use it is:

$(document).on('click','#imprimir' ,function() {
    printDiv('impri')
});

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X