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
axios Wie man die Get-Anfrage abfängt und die Datei herunterlädt.
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,
StringsAjax-Anfragen haben die folgenden Funktionen: Antwort wird an
Javascriptzur 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:
Anfrage sendenAntwort 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
Wir können einen Interceptor für Axios hinzufügen:Dann können wir Laden Sie die Datei über die Get-Anfrage in Axios herunter.
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 axiosIch 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:
Wie das Vue-Projekt über Baidus BAE veröffentlicht wirdDetaillierte Grafik- und Texterklärung der Einführung von Highcharts in VueDas 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!
