Curso Profesional de Vue.js 2

Toma las primeras clases gratis

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

<a v-print=" 'container' " >Imprimir Contenido</a>
<div id="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 = {}; 

function printSection ( el, binding ){
   // insertar css especial para la impresión, esto mostrar un contenedor especial y ocultara el resto de contenido
   let 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 imprimir
   let printSection = document.getElementById('printSection');

   // si no existe la creo y la inserto en el body
   if (!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 id
      var 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 imprimir
   function printElement( elem ){

      // creo un nodo y lo inserto dentro de mi sección a imprimir
      let 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 directiva
export default print

Espero que sea de ayuda.

Curso Profesional de Vue.js 2

Toma las primeras clases gratis

0 Comentarios

para escribir tu comentario

Artículos relacionados