Saltar al contenido

Vue + Laravel: ¿Cómo descargar correctamente un archivo PDF?

El tutorial o código que encontrarás en este post es la solución más rápida y válida que hallamos a tu duda o problema.

Solución:

SOLUCIÓN:

El código anterior era correcto. Lo que faltaba era agregar el adecuado responseType como arraybuffer.

me asuste con esos ???? dentro de la respuesta, y eso me estaba engañando. Esos signos de interrogación estaban bien, ya que pdf es un dato binario y está destinado a ser leído por un lector adecuado.

EL BÚFER DE ARRAY:

Y arraybuffer se usa precisamente para guardar datos binarios.

Esta es la definición del sitio web de mozilla:

El objeto ArrayBuffer se utiliza para representar un búfer de datos binarios sin formato de longitud fija genérico. No puede manipular directamente el contenido de un ArrayBuffer; en su lugar, crea uno de los escritos array objetos o un objeto DataView que representa el búfer en un formato específico, y lo usa para leer y escribir el contenido del búfer.

Y el ResponseType string indica el tipo de respuesta. Al decirle que es un búfer de matriz, luego trata los datos en consecuencia.

Y con solo agregar el tipo de respuesta logré descargar correctamente el archivo pdf.

EL CÓDIGO:

Este es el código Vue corregido (exactamente como antes, pero con la adición del tipo de respuesta):

downloadFile() 
  this.$http.get(this.appApiPath + '/testpdf', responseType: 'arraybuffer')
    .then(response => 
      let blob = new Blob([response.data],  type: 'application/pdf' )
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = 'test.pdf'
      link.click()
    )

EDITAR:

Esta es una solución más completa que tiene en cuenta el comportamiento de otros navegadores:

downloadContract(booking) 
  this.$http.get(this.appApiPath + '/download_contract/' + booking.id, responseType: 'arraybuffer')
    .then(response => 
      this.downloadFile(response, 'customFilename')
    , response => 
      console.warn('error from download_contract')
      console.log(response)
      // Manage errors
      
    )
},

downloadFile(response, filename) 
  // It is necessary to create a new blob object with mime-type explicitly set
  // otherwise only Chrome works like it should
  var newBlob = new Blob([response.body], 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(newBlob)
    return
  

  // For other browsers:
  // Create a link pointing to the ObjectURL containing the blob.
  const data = window.URL.createObjectURL(newBlob)
  var link = document.createElement('a')
  link.href = data
  link.download = filename + '.pdf'
  link.click()
  setTimeout(function () 
    // For Firefox it is necessary to delay revoking the ObjectURL
    window.URL.revokeObjectURL(data)
  , 100)
,

No podrás hacer la descarga desde Laravel para Vue ya que ambos se ejecutan en diferentes puertos, supongo.

Incluso si intentas algo como esto.

public function getDownload()
    
        //PDF file is stored under project/public/download/info.pdf
        $file= public_path(). "/download/info.pdf";

        $headers = [
              'Content-Type' => 'application/pdf',
           ];

    return response()->download($file, 'filename.pdf', $headers);
    

No ayudará ya que está enviando encabezados a la Laravel Puerto Intenta usar Vue js bibliotecas e intentar enviar ese contenido pdf en la biblioteca

Prueba esto Obtén ayuda desde aquí

Aquí tienes las comentarios y calificaciones

Más adelante puedes encontrar las críticas de otros usuarios, tú aún tienes el poder dejar el tuyo si te gusta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *