So verwenden Sie Axios, um die Download-Funktion in vue.js zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie Axios zum Implementieren der Download-Funktion in vue.js verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Axios zum Implementieren der Download-Funktion in vue.js? Schauen wir uns das gemeinsam an.

Dieser Artikel stammt hauptsächlich aus einer Antwort auf Zhihu. Obwohl er klein ist, bleibt mir nichts anderes übrig Beantworten Sie es

.

Der Grund, warum Ajax keine Dateien herunterladen kannDie GET-Anfragen (Frame, a) und POST-Anfragen (Formular) des Browsers weisen die folgenden Merkmale auf:

Antwort wird zur Verarbeitung an den Browser übergeben

Antwortinhalt kann Binärdateien,

usw. sein.

Ajax-Anfragen haben die folgenden Funktionen: Antwort wird an

zur Verarbeitung übergeben Antwortinhalt kann nur Zeichenfolge sein

Daher kann Ajax selbst die Download-Funktion des Browsers nicht auslösen.

Axios fängt die Anfrage ab und implementiert den Download Um eine Datei herunterzuladen, verwenden wir normalerweise die folgenden Schritte:

Antwort erhalten

Verwenden Sie die Antwort, um festzustellen, ob es sich bei der Rückgabe um eine Datei handelt

Wenn es sich um eine Datei handelt, fügen Sie sie ein einen Frame in die Seite einfügen

Frame verwenden, um Browser-Download zu implementieren

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Axios, um die Download-Funktion in vue.js zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!