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

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,

Strings

usw. sein.

Ajax-Anfragen haben die folgenden Funktionen: Antwort wird an

Javascript

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:

Anfrage senden

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

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 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:

Wie das Vue-Projekt über Baidus BAE veröffentlicht wird

Detaillierte Grafik- und Texterklärung der Einführung von Highcharts in Vue

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!