descargar - forzar descarga javascript

Forzar descarga de solicitud GET utilizando axios.

Question

Estoy usando vuejs 2 + axios. Necesito enviar una solicitud de obtención, pasar algunos parámetros al servidor y obtener un PDF como respuesta. Servidor utiliza Laravel.

Asi que

axios.get(`order-results/${id}/export-pdf`, { params: { ... }})

realiza una solicitud exitosa pero no inicia la descarga forzada, a pesar de que el servidor devuelve los encabezados correctos.

Creo que esta es una situación típica cuando necesita, por ejemplo, formar un informe en PDF y pasar algunos filtros al servidor. Entonces, ¿cómo podría lograrse?

Actualizar

Así que en realidad encontré una solución. Sin embargo, el mismo enfoque no funcionó con axios, no sé por qué, por eso usé el objeto XHR sin formato. Así que la solución es crear un objeto blob y la función createUrlObject usuario. Ejemplo de ejemplo:

let xhr = new XMLHttpRequest()
xhr.open(''POST'', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true)
xhr.setRequestHeader("Authorization", ''Bearer '' + this.token())
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.responseType = ''arraybuffer''
xhr.onload = function(e) {
if (this.status === 200) {
let blob = new Blob([this.response], { type:"application/pdf" })
let link = document.createElement(''a'')
link.href = window.URL.createObjectURL(blob)
link.download = ''Results.pdf''
link.click()
}
}

Importante: debe tener un búfer de matriz como tipo de respuesta

Sin embargo, el mismo código escrito en axios devuelve PDF que está vacío:

axios.post(`order-results/${id}/export-pdf`, {
data,
responseType: ''arraybuffer''
}).then((response) => {
console.log(response)
let blob = new Blob([response.data], { type: ''application/pdf'' } ),
url = window.URL.createObjectURL(blob)
window.open(url); // Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions
})

Answer 1

Está obteniendo un PDF vacío porque no se pasan datos al servidor. Puedes intentar pasar datos usando un objeto de datos como este

 axios
.post(`order-results/${id}/export-pdf`, {
data: {
firstName: ''Fred''
},
responseType: ''arraybuffer''
})
.then(response => {
console.log(response)
let blob = new Blob([response.data], { type: ''application/pdf'' }),
url = window.URL.createObjectURL(blob)
window.open(url) // Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions
})

Por cierto, tengo que agradecerte mucho por mostrarme la sugerencia para descargar el pdf de la respuesta. Gracias :)

 var dates = {
fromDate: 20/5/2017,
toDate: 25/5/2017
}

La forma en que he usado es,

axios({
method: ''post'',
url: ''/reports/interval-dates'',
responseType: ''arraybuffer'',
data: dates
}).then(function(response) {
let blob = new Blob([response.data], { type: ''application/pdf'' })
let link = document.createElement(''a'')
link.href = window.URL.createObjectURL(blob)
link.download = ''Report.pdf''
link.click()
})

Answer 2

Intente esto: me funciona perfectamente con la compatibilidad con Internet Explorer 11 (createObjectURL no funciona en Explorer 11)

axios({
url: ''http://vvv.dev'',
method: ''GET'',
responseType: ''blob'', // important
}).then((response) => {
if (!window.navigator.msSaveOrOpenBlob){
// BLOB NAVIGATOR
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement(''a'');
link.href = url;
link.setAttribute(''download'', ''download.pdf'');
document.body.appendChild(link);
link.click();
}else{
// BLOB FOR EXPLORER 11
const url = window.navigator.msSaveOrOpenBlob(new Blob([response.data]),"download.pdf");
}
});

https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743

Answer 3

No creo que sea posible hacer esto en axios o incluso AJAX. El archivo se guardará en la memoria, es decir, no podrá guardar el archivo en el disco. Esto se debe a que JavaScript no puede interactuar con el disco. Eso sería un grave problema de seguridad y está bloqueado en todos los navegadores principales.

Puede construir su URL en el front-end y descargarla de la siguiente manera:

 var url = ''http://example.com/order-results/'' + id + ''/export-pdf?'' + ''..params..''
window.open(url, ''_blank'');

¡Espero que esto ayude!

Answer 4

Tuve problemas similares: terminé creando un enlace y descargando desde allí.

Pongo más detalles de cómo en la answer en otra pregunta de .