web-dev-qa-db-fra.com

Télécharger PDF de la réponse http avec Axios

Je travaille sur une application Vue avec une API back-end Laravel. Après avoir cliqué sur un lien, je souhaite appeler le serveur pour télécharger un fichier donné (la plupart du temps, un fichier PDF). Lorsque je fais une requête get avec axios, je reçois un PDF en retour, dans le corps de la réponse. Je voudrais télécharger ce fichier directement.

Pour vous donner une meilleure idée de l’aspect de la réponse:

 enter image description here (remarque: je sais qu'une réponse textuelle est préférable à une image, mais je ne vois aucun moyen de la renvoyer à cause de la longueur du contenu PDF actuel ...)

Est-il possible de télécharger ce fichier avec JavaScript ou quelque chose? Il doit s'agir d'un téléchargement direct sans cliquer sur le bouton. 

Code

// This method gets called when clicking on a link
downloadFile(id) {
    const specificationId = this.$route.params.specificationId;

    axios
        .get(`${this.$API_URL}/api/v1/suppliersmanagement/product-specifications/${specificationId}/fileupload/${id}/download`, {
            headers: this.headers,
        })
        .then(response => {
            console.log(response);
            // Direct download the file here..
        })
        .catch(error => console.log(error));
},
javascripthttpvue.jsaxios
2
Gijsberts

Comme @Sandip Nirmal m'a suggéré d'utiliser downloadjs et cela a très bien fonctionné! Dû faire quelques ajustements à mon code, mais à la fin cela a fonctionné.

Mon nouveau code

// npm i downloadjs
import download from 'downloadjs'

// method
downloadFile(file) {
    const specificationId = this.$route.params.specificationId;

    axios
        .get(`${this.$API_URL}/api/v1/suppliersmanagement/product-specifications/${specificationId}/fileupload/${file.id}/download`, {
            headers: this.headers,
            responseType: 'blob', // had to add this one here
        })
        .then(response => {
           const content = response.headers['content-type'];
           download(response.data, file.file_name, content)
        })
        .catch(error => console.log(error));
},
2
Gijsberts

Vous avez 2 options pour cela. Si vous voulez le faire depuis le serveur et si vous utilisez Node.js comme backend. Vous pouvez le faire facilement en utilisant la méthode res.download of express. Vous pouvez suivre cette réponse pour cela Téléchargez un fichier à partir de NodeJS Server avec Express .

Mais si vous voulez le gérer depuis un client, il y a peu d'options car vous ne pouvez pas utiliser axios, XHR, chercher pour télécharger le fichier directement. Vous pouvez utiliser download.js ou écrire votre propre code de la manière suivante.

return axios({
    url: '/download', // download url
    method: 'get'
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      mode: 'no-cors'
    }
  })
    .then(response => response.blob())
    .then(blob => {
      var url = window.URL.createObjectURL(blob)
      var a = document.createElement('a')
      a.href = url
      a.download = fileName
      a.click()
      a.remove()
      setTimeout(() => window.URL.revokeObjectURL(url), 100)
    })

Comme la réponse renvoyée par le serveur est au format json, vous devez la convertir en ObjectURL et la définir comme balise d'ancrage.

Si vous insérez à l'intérieur du code download.js, vous retrouverez la même implémentation.

0
Sandip Nirmal