Forcer le téléchargement demande d'OBTENIR l'aide d'axios
Je suis en utilisant vuejs 2 + axios.
J'ai besoin d'envoyer une requête get, passer des paramètres au serveur, et d'obtenir un fichier PDF en tant que réponse. Le serveur utilise Laravel.
Donc
axios.get(`order-results/${id}/export-pdf`, { params: { ... }})
fait succès de la demande, mais il ne démarre pas forcer le téléchargement, même si le serveur renvoie corriger les en-têtes.
Je pense que c'est une situation typique quand vous en avez besoin, par exemple, la forme d'un rapport au format PDF et passer quelques filtres sur le serveur. Alors, comment pourrait-il être réalisé?
Mise à jour
Donc en fait j'ai trouvé une solution. Cependant, la même approche ne fonctionne pas avec axios, je ne sais pas pourquoi, c'est pourquoi j'ai utilisé raw objet XHR. Donc la solution est de créer un objet blob et de l'utilisateur createUrlObject
fonction. Exemple d'échantillon:
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()
}
}
Important: vous devriez avoir de la matrice de la mémoire tampon de réponse de type
Cependant, le code écrit dans axios retourne PDF qui est vide:
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
})
Yep, en fait, vous pouvez enregistrer le fichier sur votre disque. Je vais poster la solution qui m'est venu
Intéressant, merci de poster. Et j'ai aussi tombé sur ce, en vue, un composant peut être créé qui gère cela. stackoverflow.com/questions/16799483/...
Je suspecd axios coder la réponse.les données pour le transport, j'ai essayé de retourner les encodées en base64 pdf, qui peut être téléchargé normalement
J'ai remarqué que vous d'abord essayé avec
GET
méthode, mais a fini par faire POST
méthode. Est-il une raison particulière à cela?OriginalL'auteur Victor | 2017-04-16
Vous devez vous connecter pour publier un commentaire.
Essayez ceci:
Il fonctionne parfaitement pour moi avec de compatibilité d'Internet Explorer 11 (createObjectURL ne fonctionne pas sur Explorer 11)
https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743
OriginalL'auteur gtamborero
Je ne pense pas que c'est possible de faire cela dans axios ou encore l'AJAX. Le dossier sera conservé en mémoire, c'est à dire vous ne pouvez pas enregistrer le fichier sur le disque. C'est parce que le JavaScript ne peut pas interagir avec le disque. Ce serait un grave problème de sécurité et il est bloqué dans tous les principaux navigateurs.
Vous pouvez construire votre URL dans le front-end et télécharger de la façon suivante:
Espérons que cette aide!
Peu importe ce que, vous ne serez pas en mesure d'enregistrer le fichier sur votre disque. OBTENIR la demande peut permettre à 2048 caractères.
OriginalL'auteur Deepak
J'ai eu des problèmes similaires, j'ai fini la création de lien et le téléchargement à partir de là.
J'ai mis plus de détails de la façon dont dans le réponse sur un autre stackoverflow question.
OriginalL'auteur Anthony