Vue / HTML / JS cómo descargar un archivo al navegador usando la etiqueta de descarga

Solución:

Puede recuperar el archivo como un blob y proporcionarlo de la misma manera, no habrá ninguna solicitud que conduzca a problemas de CORS.

Plantilla

<a
  :href="https://foroayuda.es/item.url"
  v-text="item.label"
  @click.prevent="downloadItem(item)" />

Vue

methods: {
  downloadItem ({ url, label }) {
    Axios.get(url, { responseType: 'blob' })
      .then(response => {
        const blob = new Blob([response.data], { type: 'application/pdf' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = label
        link.click()
        URL.revokeObjectURL(link.href)
      }).catch(console.error)
  }
}

Notas: Usé Axios para mi ejemplo, pero eso no es un requisito, el tipo de mime del blob está cableado en aras de la simplicidad.

---

---

Utiliza Nuestro Buscador