Verwenden Sie Axios, um die Download-Funktion über vue.js zu implementieren (ausführliches Tutorial).

Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung von vue.js zur Implementierung der Download-Funktion mit Axios vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

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:

Die Antwort wird vom Browser verarbeitet

Der Antwortinhalt kann Binärdateien, Zeichenfolgen usw. sein.

Ajax-Anfragen weisen die folgenden Merkmale auf : Antwort wird von Javascript verarbeitet

Antwortinhalt kann nur eine 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 diese 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:

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

Dann können wir den herunterladen Datei über die Get-Anfrage in Axios.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

nodejs implementiert eine supereinfache Methode zum Generieren von QR-Code

nodejs+mongodb aggregierte Kaskadenabfrageoperationsbeispiel

Lösen Sie das Problem, dass der DOM-Vorgang auf der Vue-Seite nicht wirksam wird

Das obige ist der detaillierte Inhalt vonVerwenden Sie Axios, um die Download-Funktion über vue.js zu implementieren (ausführliches Tutorial).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!