Comparte en Facebook Twitter Google+

banner render PDF

Es muy común tener que trabajar con documentos PDF en nuestras aplicaciones. En Laravel podemos generar PDFs haciendo uso de librerías como DOMPDF para después retornarlos de alguna forma al usuario. Haciendo uso de un plugin de Vue.js llamado vue-pdf podemos renderizar documentos PDF en el navegador de forma muy sencilla.

Ejemplo de vue-pdf

Instalación y configuración

El proceso de instalación de vue-pdf es muy simple, nada más debemos ejecutar el siguiente comando de NPM en la terminal:

Hecho esto importamos vue-pdf en nuestra aplicación de Vue.js:

Una vez importado podemos renderizar un documento PDF llamando al componente desde nuestra plantilla indicando en src la ruta a nuestro documento:

Por defecto, solo la primera página de nuestro documento será renderizada. A continuación veremos cómo mostrar todas las páginas de nuestro documento además de aprender cómo personalizar el uso del plugin.

Propiedades

vue-pdf tiene tres propiedades que usamos para poder mostrar nuestro documento:

  • src: en esta propiedad indicamos la ubicación de nuestro documento.
  • page: en esta propiedad indicamos la página que queremos mostrar.
  • rotate: en esta propiedad indicamos la posición en la que queremos mostrar nuestro documento.

Supongamos que queremos mostrar nuestro documento en la segunda página y con una rotación de 180 grados, lo haríamos de la siguiente forma:

En la propiedad rotate sólo múltiplos de 90 son válidos como valor (90, 180, 270 y 360).

Obteniendo el número de páginas

Para obtener el número de páginas debemos cambiar un poco la forma en la que cargamos nuestro documento. Ahora, en lugar de llamar directamente al documento en la propiedad src pasaremos un valor desde nuestra instancia de Vue. Esto nos permitirá no sólo obtener el número de páginas sino también realizar otro tipo de cambios, como renderizar todas las páginas del documento. Veamos los cambios que debemos realizar:

Como puedes observar ahora cargamos el documento con pdf.createLoadingTask y lo guardamos en una variable llamada pdfDocument, que luego pasamos como valor a la propiedad src en data. En data también definimos una propiedad numPages con un valor por defecto de cero.

Hecho esto, en mounted() podemos actualizar la variable numPages con el número de páginas:

Para finalizar simplemente actualizamos nuestra plantilla. Observa que ahora en lugar de pasar la ruta al documento directamente enlazamos la propiedad src que tenemos en data:

Renderizando todas las páginas

Hasta el momento sólo podemos ver una página a la vez, lo cual no es lo más ideal. A continuación veremos como podemos renderizar todas las páginas de nuestro documento PDF.

En nuestra instancia de Vue tenemos todo lo necesario para poder mostrar todas las páginas, simplemente debemos cambiar la plantilla, agregando un v-for donde utilizamos la propiedad numPages para renderizar todo:

Observa cómo en :page pasamos la página que queremos mostrar, que previamente obtenemos en el v-for.

Puedes ajustar la propiedad width de style para, por ejemplo, mostrar dos páginas a la vez.

Ejemplo al 50%

En la imagen superior la propiedad width está ajustada al 50%.

Si quieres conocer un poco más del plugin puedes visitar su repositorio en GitHub.

El libro usado en los ejemplos es La Elegancia de Vue 2 traducido por Styde y disponible en Leanpub.

Material relacionado

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 9 USD al mes: ver planes.