Crear Directiva de Impresión

8200

Muy buen día, acontinuación les comparto una directiva muy útil y que yo uso bastante con mis proyectos en vue, es la directiva para poder imprimir una sección de html.

Esta directiva acepta como parámetro el id de la sección que queremos imprimir. Aquí un ejemplo:
Enlace de directiva

<av-print=" 'container' " >Imprimir Contenido</a>

<divid="container" ><p>Contenido a imprimir</p></div>

Y aquí les muestro la directiva con comentarios para saber que se hace en cada parte.

const print = {}; 

functionprintSection ( el, binding ){
   // insertar css especial para la impresión, esto mostrar un contenedor especial y ocultara el resto de contenidolet style = document.createElement('style');
   style.type = 'text/css';
   style.appendChild(document.createTextNode("@media screen{#printSection{display:none}}@media print{#printSection,body{overflow:visible!important}body *{visibility:hidden}#printSection,#printSection *{visibility:visible}#printSection{position:absolute;left:0;top:0;right:0}#printSection table{width:100%!important}}"));
   document.body.appendChild(style);

   // busco si existe mi sección para imprimirlet printSection = document.getElementById('printSection');

   // si no existe la creo y la inserto en el bodyif (!printSection) {
      printSection = document.createElement('div');
      printSection.id = 'printSection';
      document.body.appendChild(printSection);
  }

   // creo el evento del click para cada que se de click en imprimir
   el.addEventListener('click', () => {

      // busco el contenido a imprimir, esto ya que como parametro tenia el idvar elemToPrint = document.getElementById(binding.value);

      //si existe el contenido entonces lo imprimiréif (elemToPrint) {
         printSection.innerHTML = ''; // limpio el contenido anterior de mi sección a imprimir
         printElement(elemToPrint);
      }
   });

   // funcion para imprimirfunctionprintElement( elem ){

      // creo un nodo y lo inserto dentro de mi sección a imprimirlet domClone = elem.cloneNode(true);
      printSection.appendChild(domClone);
      window.print(); //mando a imprimir
   }
}


// registro la directiva
print.install = function( Vue ){
   Vue.directive('print',{
      bind( el, binding){
         printSection( el, binding )
      }
   })
}

// exporto mi directivaexportdefault print