Utilisez axios pour implémenter la fonction de téléchargement via vue.js (tutoriel détaillé)

Ci-dessous, je vais partager avec vous un exemple d'utilisation de vue.js pour implémenter la fonction de téléchargement à l'aide d'axios. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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 traitée par le navigateur

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

Les requêtes Ajax ont les caractéristiques suivantes :

la réponse sera traitée par Javascript

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=&#39;&#39;;
 res.headers[&#39;content-type&#39;] = &#39;text/json&#39;
 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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Nodejs implémente une méthode super simple de génération de code QR

exemple d'opération de requête en cascade agrégée nodejs+mongodb

Résoudre le problème selon lequel l'opération DOM sur la page vue ne prend pas effet

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!