Vue importiert Excel-Tabellen und lädt automatisch die Daten herunter, die nicht importiert werden konnten

Es gibt eine solche Anforderung: eine Importschaltfläche. Klicken Sie auf die Schaltfläche, um eine Excel-Tabelle zu importieren. Wenn einige Daten in der Excel-Tabelle nicht importiert werden können, wird die Excel-Tabelle der fehlgeschlagenen Daten automatisch heruntergeladen. Wenn alle Daten erfolgreich importiert wurden, wird die Meldung „Import erfolgreich“ angezeigt.

Fügen Sie zunächst die Upload-Dateikomponente von ElementUI an

Element – ​​Das weltweit beliebteste Vue-UI-Framework

Element, eine Desktop-Komponentenbibliothek basierend auf Vue 2.0 für Entwickler, Designer und Produktmanager

https://element.eleme.cn/#/zh-CN/component/upload

Auf der offiziellen Website werden die Eigenschaften und die Verwendung der upload Komponente ausführlich vorgestellt, daher werde ich hier nicht näher darauf eingehen. Hier verwenden wir sie hauptsächlich, um die Anforderung zum Importieren von Excel-Tabellen zu Beginn zu erfüllen. (Die ElementUI Bibliothek muss in das Vue-Projekt eingeführt werden. Detaillierte Schritte finden Sie auf der offiziellen Website.)

1. Einführung des ElementUI-Upload-Komponenten-Uploads

<el-hochladen
  Klasse="Upload-Demo"
  Aktion="https://jsonplaceholder.typicode.com/posts/"
  mehrere
  :auto-upload="false"
  :file-list="Dateiliste"
  :on-change="Dateiänderung">
  <el-button type="primary">Importieren</el-button>
</el-upload>

Seiteneffekte

Attributeinführung

2. Klicken Sie auf die Schaltfläche „Importieren“ und wählen Sie die Datei aus (klicken Sie auf „Öffnen“, um die Änderung auszulösen).

An diesem Punkt können Sie die Methode fileChange verwenden, um die Dateistruktur in der Konsole auszudrucken und anzuzeigen

Dateiänderung(Datei,Dateiliste){
  console.log(Datei,'Datei')
  console.log(Dateiliste,'Dateiliste')
} 

3. Jetzt haben wir die ausgewählte Datei und können die Upload-Methode anpassen, um sie an den Backend-Server zu senden

Dateiänderung(Datei,Dateiliste){
  console.log(Datei,'Datei')
  console.log(Dateiliste,'Dateiliste')
  let url = 'xxx' //Backend-Server-API
  let-Header = {
    'Content-Type':'multipart/form-data' //Beim benutzerdefinierten Hochladen ist dieser Anforderungsheaderparameter erforderlich}
  let formData = ''
  for(let i = 0;i < fileList.length;i++){ // Datei-Array durchlaufen, in der Dateiliste können mehrere Dateien enthalten sein formData = new FormData()
    formData.append('name',fileList[i].name)
    formData.append('Typ','.xlsx')
    formData.append('Datei',fileList[i].raw)
  }
  dies.$axios({
    Überschriften: Überschriften,
    Methode: 'post',
    Daten: Formulardaten,
    URL: URL,
    responseType:'blob' //Dieser Parameter ist erforderlich, da sonst in der heruntergeladenen Excel-Tabelle eine Meldung angezeigt wird, dass die Datei beschädigt ist und nicht geöffnet werden kann}).then(res=>{
    wenn(res && res.data.size == 0){
      //Wenn der Hintergrund keinen Stream zurückgibt, bedeutet dies, dass alle Daten erfolgreich importiert wurden und die Meldung „Import erfolgreich“ angezeigt wird. Die Rückgabe wird nicht automatisch heruntergeladen.
    }
    //Wenn der Hintergrund einen Stream zurückgibt, bedeutet dies, dass der Import einiger Daten fehlgeschlagen ist. Dann wird die Excel-Tabelle mit den fehlgeschlagenen Daten automatisch heruntergeladen. let name = 'Import fehlgeschlagener Daten.xlsx' //Passen Sie den Namen der heruntergeladenen Excel-Tabelle an. let blob = new Blob([res.data])
    let url = Fenster.URL.createObjectURL(blob)
    lass einen Link = Dokument.createElement('a').
    aLink.style.display = "keine"
    aLink.href = URL
    //Das Download-Attribut definiert die Adresse des Download-Links. Das href-Attribut muss im <a>-Tag angegeben werden.
    aLink.setAttribute('herunterladen',Name) 
    Dokument.Body.AnhängenUntergeordnetesElement(einLink)
    einLink.klick()
    Dokument.Body.RemoveChild(einLink)
    Fenster.URL.revokeObjectURL(URL)
    //Nach Abschluss des Downloads können andere Vorgänge ausgeführt werden, z. B. das Aktualisieren der Liste, benutzerfreundliche Eingabeaufforderungen usw.})
}

Methodenanalyse

formData ist eine neue Schnittstelle, die von ajax2.0 (XMLHttpRequest Level2) vorgeschlagen wurde. FormData Objekt können name und value von form kombiniert werden, um Formulardaten zu serialisieren, wodurch Formularelemente verbunden und die Arbeitseffizienz verbessert werden. append fügt FormData einen neuen Attributwert hinzu. Wenn der zu FormData gehörende Attributwert bereits vorhanden ist, wird der ursprüngliche Wert überschrieben, andernfalls wird ein neuer Attributwert hinzugefügt.

Ein Blob -Objekt stellt ein unveränderliches, rohes dateiähnliches Objekt dar. Seine Daten können im Text- oder Binärformat gelesen und zur Datenmanipulation auch in ReadableStream konvertiert werden.

URL.createObjectURL() erstellt einen DOMString , der eine URL enthält, die das als Parameter angegebene Objekt darstellt. Der Lebenszyklus dieser URL ist an document in dem Fenster gebunden, in dem sie erstellt wurde. Dieses neue URL-Objekt stellt das angegebene File oder Blob -Objekt dar.

URL.revokeObjectURL() wird verwendet, um ein zuvor vorhandenes URL-Objekt freizugeben, das durch den Aufruf von URL.createObjectURL() erstellt wurde. Wenn Sie ein URL-Objekt nicht mehr benötigen, sollten Sie diese Methode aufrufen, um dem Browser mitzuteilen, dass er keinen Verweis auf die Datei im Speicher behalten muss.

Zusammenfassung: Oben wird der benutzerdefinierte Import von Excel-Tabellen implementiert und der von der Schnittstelle zurückgegebene Stream wird automatisch heruntergeladen. Der Code kann direkt verwendet werden, aber beachten Sie, dass die zurückgegebenen Daten möglicherweise nicht mit meiner response . Weitere Informationen finden Sie in den Rückgabedaten der gemeinsamen Debugging-Schnittstelle.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.