Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

...

Bloque de código
languagejs
abrirPdf() {
      const blob = new Blob([this.matriculaPdf], { type: 'application/pdf' });
      // IE doesn't allow using a blob object directly as link href
      // instead it is necessary to use msSaveOrOpenBlob
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob);
        return;
      }
      // For other browsers:
      // Create a link pointing to the ObjectURL containing the blob.
      const data = window.URL.createObjectURL(blob);
      // window.open(data, '_blank');
      const link = document.createElement('a');
      link.href = data;
      link.target = '_blank';
      link.click();
      setTimeout(() => {
        // For Firefox it is necessary to delay revoking the ObjectURL
        window.URL.revokeObjectURL(data);
      }, 100);
    },


Visor de PDF

Para Vue, tenemos disponible el componente vue-pdf-embed, que podemos descargar con:

Bloque de código
npm i vue-pdf-embed

Este componente requiere un objeto con un campo data que contenga el pdf,  y lo utilizaríamos de esta forma:

...

languagexml

...

A este componente se le pasa el archivo en su propiedad source. Se le puede pasar tanto una url de donde obtenerlo como el arraybuffer del archivo, dentro del campo data de un objeto, es decir, de esta forma 

Bloque de código
{ data: arraybuffer }

Siendo arraybuffer los datos recibidos del servicio.

Lo malo de este visor es que se muestra el pdf tal cual, sin ningún tipo de layout para navegar sobre él ni nada, por lo que esta funcionalidad habría que implementarla aparte. Podemos consultar en la documentación todas las propiedades y eventos que proporciona para ello: https://github.com/hrynko/vue-pdf-embed.