0

quiero imprimir el contenido de un div al presionar el botón imprimir... pero no he podido hacer lo haga, hasta ahora solo he podido hacer que me imprima todo lo que contiene el body pero no me respeta los estilos que tiene. y necesito que solo imprima el contenido del div con el id "imprimir".

introducir la descripción de la imagen aquí

var contador=0;
function agregar()
{
   tool = document.getElementById("tool").value;
   cant = document.getElementById("cantidad").value;
   
   var fila="<tr><td>"+(contador+=1)+"</td><td>"+tool+"</td><td>"+cant+"</td></tr>";
   
   var btn = document.createElement("TR");
   btn.innerHTML=fila;
   document.getElementById("TDbody").appendChild(btn);
   document.getElementById("tool").value="";
   document.getElementById("tool").focus();
}


function imprSelec(nombre) 
{
    var contenido= document.getElementById(nombre).innerHTML;
    var contenidoOriginal= document.body.innerHTML;

     document.body.innerHTML = contenido;
     window.print();
     document.body.innerHTML = contenidoOriginal;
    }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<br>
<div class="col-sm-6 col-lg-6">
  <div class="container d-flex ">
    <input type="text" id="tool" class="form-control" style="width: 200px;" placeholder="Herramienta">&nbsp;
        <input type="number" min="1" class="form-control" value="1" id="cantidad" style="width: 70px;">&nbsp;
        <button id="btn" onclick="agregar();" class="btn btn-sm btn-success">Agregar</button>
            </div>
        </div>
    <br>
    <center><a href="javascript:imprSelec('imprimir')" class="btn btn-sm btn-light border"> Imprimir </a></center>

    
<div id='imprimir'class='pt-5'>
<p>Nombre: <u>Francisco Perez Martinez</u></p>
  <table class="text-center table-bordered">
    <thead class="bg-secondary text-white">
      <th width="30"><font size="1">#</font></th>
      <th width="200"><font size="1">HERRAMIENTA</font></th>
      <th width="50"><font size="1">CANTIDAD</font></th>
    </thead>
    <tbody id="TDbody"></tbody>
  </table>
</div>      

3 respuestas 3

2
  • Crea una hoja de estilos css para imprimir imprimir.css

  • añade un media querie de print:

    @media print { #imprimir{ ''''' }

    }

-En la función de Javascript cambia la hoja de estilos al darle al botón de imprirmir.

document.getElementById('miCSS').href = 'css/imprimir.css';

Si te apreciera algún elemento que no quieres imprimir solo tienes que nombrar su id o la class en el @media y ponerle el valor none a sus atributos.

A mi me funcionó así, espero que te sirva.

1
  • gracias.. si me funciono
    – Ferns
    Commented el 24 sept. 2021 a las 14:10
0

A mi tambien me funciono así: Crea una hoja de estilos css para imprimir imprimir.css

añade un media querie de print:

@media print { #imprimir{ ''''' }

}

-En la función de Javascript cambia la hoja de estilos al darle al botón de imprirmir.

document.getElementById('miCSS').href = 'css/imprimir.css';
0

Con el método setTimeout le das tiempo al contenedor de cargar lo estilos y demás recursos externos.

function tagPrint() {
  let tagContainer = document.getElementById("responresult");
  let popUp = window.open(" ", "popUp");
  popUp.document.write(tagContainer.innerHTML);
  popUp.document.close();

  setTimeout(function () {
    popUp.print();
    popUp.close();
  }, 1000);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.