Desarrollar un visor de PDF con Vuejs 2

En esta entrada vamos a ver cómo podemos desarrollar un visor de PDF con Vuejs 2 para renderizar los archivos PDF  directamente en tu aplicación. Este tipo de funcionalidades están más solicitadas de lo que parece y siempre es útil no alejar a los usuarios de nuestras aplicaciones ya que es justamente donde nosotros queremos que estén.


Si te interesa aprender a desarrollar este tipo de funcionalidades y no quieres perder tiempo en tener que encontrar la forma te invito a que te suscribas a la plataforma y puedas acceder al contenido completo de esta entrada.

Instalar VuePdf

Lo primero que debemos hacer es instalar la dependencia vue-pdf en nuestro proyecto con el siguiente comando:

npm install --save vue-pdf

Crear nuestro visor de PDF

Una vez instalada simplemente deberemos generar un componente como el siguiente, el cual hará todo lo que necesitamos:


En mi caso yo estoy haciendo uso de Vuetify, pero tú puedes adaptar el visor a tus necesidades fácilmente.

Para utilizar nuestro visor de PDF simplemente debemos importarlo en el componente en el que deseemos hacer uso de él y definirlo de la siguiente forma:


La clave es la prop pdf-path, la cual debe ser la ruta de tu archivo PDF, puede ser relativa a tu sistema o una url completa haciendo uso del protocolo http/https, creo que el protocolo file no funciona en este caso pero no estoy seguro.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login