Vue+Element+Springboot zum Implementieren eines Beispiels für die Anzeigefunktion des Fortschrittsbalkens beim Dateidownload

<!--Download-Fortschrittsbalken-->
    <el-dialog title="Wird heruntergeladen, bitte warten" :visible.sync="fileDown.loadDialogStatus" :close-on-click-modal="false" 
      :schließen beim Drücken von Escape="false" :anzeigen-schließen="false" width="20%">
      <div Stil="Textausrichtung: Mitte;">
        <el-progress Typ="Kreis" :percentage="fileDown.percentage"></el-progress>
      </div>
      <div slot="Fußzeile" class="dialog-footer">
        <el-button type="primary" @click="downClose">Download abbrechen</el-button>
      </div>  
    </el-dialog>

DateiDown: {
        loadDialogStatus: false, // Prozentsatz des Steuerelementstatus des Popup-Fensters: 0, // Prozentsatz der Fortschrittsanzeige, Quelle: {}, // Download des Ressourcenobjekts abbrechen },

downFile(Zeile) {
    //Parameter hier einfügen var param = {};
    this.fileDown.loadDialogStatus = true;
    this.fileDown.percentage = 0;
    const Instanz = this.initInstance();
    Beispiel({
        Methode: "post",
        mit Anmeldeinformationen: true,
        url: "Downloadadresse ersetzen",
        Parameter: Parameter,
        Antworttyp: „Blob“
    }).dann(res => {
        this.fileDown.loadDialogStatus = falsch;
        konsole.info(res);
        const Inhalt = res.data;
        wenn (Inhaltsgröße == 0) {
          dies.loadClose();
          this.$alert("Download fehlgeschlagen");
          zurückkehren ;
        }
        const blob = neuer Blob([Inhalt]);
        const fileName = row.fileName; //Ersetze den Dateinamen if ("download" in document.createElement("a")) {
          // Nicht-IE-Download const elink = document.createElement("a");
          elink.download = Dateiname;
          elink.style.display = "keine";
          elink.href = URL.createObjectURL(blob);
          Dokument.Body.AnhängenUntergeordnetesElement(elink);
          elink.klick();
          setzeTimeout(Funktion() {
            URL.revokeObjectURL(elink.href); // URL-Objekt freigeben document.body.removeChild(elink);
          }, 100);
        } anders {
          // IE10+ herunterladen navigator.msSaveBlob(blob, fileName);
        }
      }).fangen(Fehler => {
          this.fileDown.loadDialogStatus = falsch;
          konsole.info(Fehler);
      });
  },
initInstance() {
      var _this = dies;
      //Ressourcentoken für Stornierung this.fileDown.source = axios.CancelToken.source();
      const instance = axios.create({ //Das Axios-Objekt sollte vorab importiert oder durch Ihr global definiertes onDownloadProgress ersetzt werden: function(ProgressEvent) {
          const load = ProgressEvent.loaded;
          const total = Fortschrittsereignis.total;
          const Fortschritt = (Last / Gesamt) * 100;
          console.log('Fortschritt='+Fortschritt);
          // Die Berechnung wurde bereits am Anfang durchgeführt. Dies muss die vorherige Berechnung überschreiten, um fortzufahren, wenn (Fortschritt > _this.fileDown.percentage) {
            _this.fileDown.percentage = Math.floor(Fortschritt);
          }
          wenn(Fortschritt == 100){
            //Download abgeschlossen_diese.DateiDown.loadDialogStatus = false;
          }
        },
        cancelToken: this.fileDown.source.token, //Deklariert ein Token für die Abbruchanforderung
      });
      Instanz zurückgeben;
    },
    runterSchließen() {
      //Download unterbrechen this.$confirm("Wenn Sie auf Schließen klicken, wird der Download unterbrochen. Möchten Sie ihn wirklich schließen?", this.$t("button.tip"), {
        Bestätigungsschaltflächentext: this.$t("button.confirm"),
        cancelButtonText: dies.$t("button.cancel"),
        Typ: „Warnung“
      }).then(() => {
          //Download-Rückruf unterbrechen this.fileDown.source.cancel('log==Kunde hat Download manuell abgebrochen');
      }).catch(() => {
          //Abbrechen – nichts tun});      
    },

//Lokale Datei abrufen und Größe berechnen. Datei: file = new File(zipFileName);//Komprimierte Datei lesen. InputStream: inputStream = new File. InputStream(file);
int totalSize = inputStream.available(); //Dateigröße abrufen logger.info("Nach der Komprimierung === aktuelle Downloadgröße der Datei size={}", totalSize);
response.setHeader("Content-Length", totalSize+""); //Beachten Sie, dass Sie die setHeader-Eigenschaft vor response.getOutputStream() festlegen müssen, da sie sonst nicht wirksam wird. OutputStream out = response.getOutputStream();
Nachfolgende Auslassungen...