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() {
  $("#imprimir").on('click', function() {
    var contenido = document.getElementById("impri").innerHTML;
    var contenidoOriginal = document.body.innerHTML;
    document.body.innerHTML = contenido;
    document.body.innerHTML = contenidoOriginal;
  $("#btn").on('click', function() {
    var conteudo = document.getElementById('impri').innerHTML,
      tela_impressao = window.open('_blank');

  <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>

  <div class="container">
    <button id="imprimir" class="btn btn-success">
            Print 1
    <button id="btn" class="btn btn-info">
            Print 2
    <div id="impri">
      <table class="table table-striped table-bordered" id="example" style="width:100%">
            <th>Start date</th>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Garrett Winters</td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>


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 () {
               }, 500)

The way to use it is:

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


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: