Comment utiliser axios pour implémenter la fonction de téléchargement dans vue.js

Cette fois, je vais vous montrer comment utiliser axios pour implémenter la fonction de téléchargement dans vue.js. Quelles sont les précautions pour utiliser axios pour implémenter la fonction de téléchargement dans vue.js. Voici les pratiques. cas, jetons un coup d'oeil ensemble.

Cet article provient principalement d'une réponse sur Zhihu. La partie rouge ici a été traitée par moi-même. Bien qu'elle soit petite, c'est un code très utile

Je n'ai pas d'autre choix que de le faire. répondez-yaxios Comment intercepter la requête get et télécharger le fichier .

La raison pour laquelle Ajax ne peut pas télécharger de fichiers

Les requêtes GET (frame, a) et POST (form) du navigateur ont les caractéristiques suivantes :

la réponse sera transmise au navigateur pour traitement

le contenu de la réponse peut être des fichiers binaires, des chaînes, etc.

Les requêtes Ajax ont les fonctionnalités suivantes :

la réponse sera transmise à Javascript pour le traitement

le contenu de la réponse ne peut être qu'une chaîne

Par conséquent, Ajax lui-même ne peut pas déclencher la fonction de téléchargement du navigateur.

Axios intercepte la requête et implémente le téléchargement

Afin de télécharger un fichier, nous utilisons généralement les étapes suivantes :

Envoyer une demande

Obtenir la réponse

Utilisez la réponse pour déterminer si le retour est un fichier

S'il s'agit d'un fichier, insérez un cadre dans la page

Utiliser le cadre pour implémenter le téléchargement du navigateur

Nous pouvons ajouter un intercepteur pour axios :

import axios from 'axios'
// download url
const downloadUrl = url => {
 let iframe = document.createElement('iframe')
 iframe.style.display = 'none'
 iframe.src = url
 iframe.onload = function () {
 document.body.removeChild(iframe)
 }
 document.body.appendChild(iframe)
}
// Add a response interceptor
axios.interceptors.response.use(c=> {
 // 处理excel文件
 if (res.headers && (res.headers['content-type'] === 'application/x-msdownload' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
 downloadUrl(res.request.responseURL)
 
 <span style="color:#ff0000;"> res.data='';
 res.headers['content-type'] = 'text/json'
 return res;</span>
 }
 ...
 return res;
}, error => {
 <span style="color:#ff0000;">// Do something with response error
 return Promise.reject(error.response.data || error.message)</span>
})
export default axios

Ensuite, nous pouvons téléchargez le fichier via la requête get dans axios.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment le projet vue est publié via le BAE de Baidu

Explication graphique et textuelle détaillée de l'introduction des highcharts en vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!