Question

147

Vue + Laravel: How to properly download a PDF file?

rated 0 times [ 150] [ 3] / answers: 1 / hits: 37749 / 6 Years ago, thu, june 7, 2018, 12:00:00

THE SITUATION:

Frontend: Vue. Backend: Laravel.

Inside the web app I need to let the user download certain pdf files:

I need Laravel to take the file and return it as a response of an API GET request.

Then inside my Vue web app I need to get the file and download it.

THE CODE:

API:

$file = public_path() . /path/test.pdf;



$headers = [

    'Content-Type' => 'application/pdf',

];

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

Web app:

downloadFile() {

  this.$http.get(this.apiPath + '/download_pdf')

    .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()

    })

}

OUTCOME:

Using this code I do manage to download a pdf file. The problem is that the pdf is blank.

Somehow the data got corrupted (not a problem of this particular pdf file, I have tried with several pdf files - same outcome)

RESPONSE FROM SERVER:

The response itself from the server is fine:

PDF:

The problem may be with the pdf file. It definitely looks corrupted data. This is an excerpt of how it looks like the response.data:

THE QUESTION:

How can I properly download a pdf file using Laravel for the API and Vue for the web app?

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

samarab

Add To Favorites

Follow

Total Points: 620

Total Questions: 95

Total Answers: 89

Location: Bonaire

Member since Wed, May 11, 2022

2 Years ago

answered 6 Years ago bradleymoisesy · Accepted Answer

SOLUTION:

The code above was correct. What was missing was adding the proper responseType as arraybuffer.

I got scared by those ???? inside the response, and that was misleading me.
Those question marks were just okay since pdf is a binary data and is meant to be read by a proper reader.

THE ARRAYBUFFER:

And arraybuffer is precisely used to keep binary data.

This is the definition from the mozilla website:

The ArrayBuffer object is used to represent a generic, fixed-length
raw binary data buffer. You cannot directly manipulate the contents of
an ArrayBuffer; instead, you create one of the typed array objects or
a DataView object which represents the buffer in a specific format,
and use that to read and write the contents of the buffer.

And the ResponseType string indicates the type of the response. By telling its an arraybuffer, it then treats the data accordingly.

And just by adding the responseType I managed to properly download the pdf file.

THE CODE:

This is corrected Vue code (exactly as before, but with the addition of the responseType):

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()

    })

}

EDIT:

This is a more complete solution that take into account other browsers behavior:

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)

},