Download pdf Chrome Ios

Question

Hello, I currently performed a workround to address a download problem using javascript (Vue) for IOS Safari and Chrome browsers. So far so good, Safari works 100%, but in Chrome IOS when downloading the file does not come with the name I want, someone could help me to solve this problem?

Requisition:

export const downloadComprovante = comprovanteHash => {
  return http.get(
    `/baixar-comprovante/${comprovanteHash}`,
    {
      responseType: 'arraybuffer',
      headers: {'Content-Type': 'application/pdf', 'Content-Disposition': 'Attachment; filename=\"comprovante.pdf\"'},
      data: {} // https://github.com/mzabriskie/axios/issues/86
    }
  ).then(response => {
    return new Blob([response.data], { type: 'application/pdf' }) // eslint-disable-line no-undef
  })
}

Calling the requisition:

...       
this.downloadComprovante(comprovanteHash).then(blob => {
    this.downloadBlob(blob, 'comprovante.pdf')
}).catch(() => {
   //mostra erro
}).finally(() => {
   //fecha o loading         
})
...

Download function:

export const downloadBlobMixin = {
  methods: {
    isIos () {
      return /(iPad|iPhone|iPod).*WebKit/.test(window.navigator.userAgent)
    },
    downloadBlob (blob, filename) {
      if (this.isIos()) {
        const reader = new FileReader()
        reader.fileName = filename
        reader.typeFile = blob.type
        reader.onload = e => {
          const url = e.target.result
          this.createLinkDownload(url, filename)
        }
        reader.readAsDataURL(blob)
        return
      }
      const url = window.URL.createObjectURL(blob)
      this.createLinkDownload(url, filename)
    },
    createLinkDownload (url, filename) {
      const link = document.createElement('a')
      link.href = url
      link.download = filename
      document.body.appendChild(link)
      link.click()
      window.URL.revokeObjectURL(url)
      setTimeout(() => {
        // For Firefox it is necessary to delay revoking the ObjectURL
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      }, 100)
    }
  }
}

Example download on Chrome IOS (name 'Document' and no extension):

Answer 1

In the download function, you can set what will be the file name

createLinkDownload (url, filename) {
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('donwload', 'nome-do-seu-arquivo.ppp')
  document.body.appendChild(link)
  link.click()
  window.URL.revokeObjectURL(url)
  setTimeout(() => {
    // For Firefox it is necessary to delay revoking the ObjectURL
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  }, 100)
}

I did something similar in my application, if it doesn’t work this I sent, try using this as an example:

Sponse = answer from get method

const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `${projeto.titulo}_${Date.now()}.pdf`);
document.body.appendChild(link);
link.click();