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

Question

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!

Answer 1

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)
},