Estás viendo una versión antigua de esta página. Ve a la versión actual.

Comparar con el actual Ver el historial de la página

« Anterior Versión 11 Actual »

Recibir PDF y darle el formato necesario

Para recibir archivos PDF del backend, se nos enviarán como un array de bytes. Si se nos envía directamente ese array como cuerpo de la respuesta, podemos especificar desde Axios el tipo de respuesta, así:

return apiRequest({ url, responseType: "arraybuffer" });

Una vez recibido, para descargarlo podemos utilizar el código de la siguiente función, pasándole el pdf y el nombre del archivo a descargar:

// Descargar un pdf (arraybuffer)
descargarPdf(pdfArrayBuf, nombre) {
  const blob = new Blob([pdfArrayBuf], {
    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);
  const link = document.createElement('a');
  link.href = data;
  link.download = nombre;
  link.click();
  setTimeout(() => {
    // For Firefox it is necessary to delay revoking the ObjectURL
    window.URL.revokeObjectURL(data);
  }, 100);
},

Si lo que queremos es abrirlo en otra pestaña del navegador, lo podemos hacer con esta otra función:

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:

npm i vue-pdf-embed

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 

{ 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.

  • Sin etiquetas