So laden Sie Excel-Stream-Dateien herunter und legen den Download-Dateinamen in Vue fest

Überblick

Exportieren Sie Excel-Anforderungen. Wenn Sie auf „Vorlage herunterladen“ oder „Feedback-Ergebnisse herunterladen“ klicken, initiiert Axios eine Backend-Schnittstellenanforderung. Wenn die zurückgegebenen Daten eine Antwort erhalten, werden verstümmelte Zeichen angezeigt, wie in der Abbildung dargestellt:

Im Folgenden sind einige Behandlungsmethoden aufgeführt.

1. Download über URL

Das heißt, das Backend stellt die Adresse der Datei zur Verfügung und Sie können diese direkt über den Browser herunterladen

Download über window.location.href = Dateipfad

window.location.href = `${location.origin}/operation/ruleImport/template`

Über window.open(url, '_blank')

Fenster.öffnen(`${location.origin}/operation/ruleImport/template`)

Der Unterschied zwischen diesen beiden Verwendungsmethoden:

• window.location: Zur aktuellen Seite springen, d. h. die aktuelle Seite verschieben; auf der Website können nur die Webseiten dieser Website geöffnet werden.
• window.open: Öffnet den Link in einem neuen Fenster; auf der Website kann die Adresse einer anderen Website geöffnet werden.

2. Download über das Download-Attribut eines Tags in Kombination mit dem Blob-Konstruktor

Das Download-Attribut des a-Tags ist eine neue Ergänzung des HTML5-Standards. Seine Funktion besteht darin, den Downloadvorgang des Browsers auszulösen, anstatt zur Download-URL zu navigieren. Dieses Attribut kann so eingestellt werden, dass beim Herunterladen ein neuer Dateiname verwendet wird.

Das Frontend erstellt einen Hyperlink und empfängt den Dateistream vom Backend:

axios.get(`/operation/ruleImport/template`, {
        responseType: "blob" //Der Datentyp der Serverantwort, der „Arraybuffer“, „Blob“, „Document“, „JSON“, „Text“, „Stream“ sein kann, der Standard ist „JSON“.
    })
    .then(res => 
        wenn(!res) zurückgeben
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // Erstelle ein Blob-Objekt, um die Daten zu verarbeiten und den Dateityp festzulegen, if (window.navigator.msSaveOrOpenBlob) { // Kompatibel mit IE10
            navigator.msSaveBlob(blob, dieser.Dateiname)
        } anders {
            const href = URL.createObjectURL(blob) //Erstellen Sie eine neue URL, um das angegebene Blob-Objekt darzustellen const a = document.createElement('a') //Erstellen Sie das a-Tag a.style.display = 'none'
            a.href = href //Geben Sie den Download-Link an. a.download = this.filename //Geben Sie den Namen der Download-Datei an. a.click() //Lösen Sie den Download aus. URL.revokeObjectURL(a.href) //Geben Sie das URL-Objekt frei. }
        // Du brauchst hier keinen Link zu erstellen, du kannst es auch direkt durch einen Aufruf von window.open(href) herunterladen})
    .catch(err => {
        console.log(fehler)
    })

Hinweis: Wenn Sie die Backend-Schnittstelle anfordern, fügen Sie dem Anforderungsheader {responseType: 'blob'} hinzu. Wenn Sie den Dateinamen für den Download festlegen, können Sie die Erweiterung direkt festlegen. Wenn nicht festgelegt, erkennt der Browser automatisch die richtige Dateierweiterung und fügt sie der Datei hinzu.

3. Über das Plugin „js-file-download“

Installieren:

npm installiere js-file-download --S

verwenden

Datei importierenDownload von 'js-file-download'

axios.get(`/operation/ruleImport/template`, {
        responseType: 'blob' // zurückgegebener Datentyp})
    .then(res => {
        fileDownload(res.data, dieser.Dateiname)
    })

Oben finden Sie Einzelheiten zum Herunterladen von Excel-Stream-Dateien und zum Festlegen des Download-Dateinamens in Vue. Weitere Informationen zum Herunterladen von Excel-Stream-Dateien und zum Festlegen des Download-Dateinamens in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!