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.