Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

/**
 * @param {Object} data: {url: Dateiadresse, download: Dateiname}
 */
Exportfunktion downLoadAll(Daten) {
  runterlassenProgress = {};
  let uniSign = new Date().getTime() + ''; // Sie können klicken, um mehrere Dateien nacheinander herunterzuladen. Hier wird der Zeitstempel verwendet, um jede heruntergeladene Datei zu unterscheiden axios.get(
    Daten.URL, 
    { Antworttyp: 'Blob', Header: { "Inhaltstyp": "application/json; Zeichensatz = utf-8" },
    onDownloadProgress (Fortschritt) {
      downProgress = Math.round(100 * progress.loaded / progress.total) // „loaded“ im Progress-Objekt gibt die heruntergeladene Menge an, „total“ die Gesamtmenge. Berechnen Sie hier den Prozentsatzstore.commit('caseInformation/SET_PROGRESS', {path: uniSign, 'progress': downProgress}) // Kombinieren Sie den Dateinamen und den Download-Fortschritt dieses Downloads in einem Objekt und verwenden Sie die Vuex-Statusverwaltung}}).then( (res)=>{ // Starten Sie den Dateidownload, nachdem die Dateistream-Übertragung abgeschlossen istif(data.downLoad){
        jsFileDownload(res.data,data.downLoad+'.'+data.url.replace(/.+\./,"")); // jsFileDownLoad wird zum Herunterladen von Dateistreams verwendet. Plugin herunterladen: npm i js-file-download, importieren: import jsFileDownLoad from 'js-file-download'
      } anders {
        : Wenn Sie eine Datei mit einem bestimmten Namen herunterladen, wird die Datei mit dem Namen des Benutzers gelöscht.
      }
  }).fangen((e)=>{
    this.$message.error('Die Datei kann nicht heruntergeladen werden.')
  })
}

...

konstanter Zustand = {
  progressList: [], // Fortschrittsliste des Dateidownloads ...
}

const Mutationen = {
  SET_PROGRESS: (state, progressObj)=>{ // Ändere die Fortschrittsliste if(state.progressList.length){ // Wenn die Fortschrittsliste existiert if(state.progressList.find(item=>item.path == progressObj.path)){ // Der oben erwähnte Pfad-Zeitstempel ist der einzige, der existiert. Wenn du also das aktuelle Fortschrittsobjekt in der Fortschrittsliste findest state.progressList.find(item=>item.path == progressObj.path).progress = progressObj.progress // Ändere den Fortschritt des aktuellen Fortschrittsobjekts
      }
    }anders{
      state.progressList.push(progressObj) // Die aktuelle Fortschrittsliste ist leer, es gibt keine Download-Aufgabe, füge das Fortschrittsobjekt direkt zum Fortschritts-Array hinzu}
  },
  DEL_PROGRESS: (Status, Eigenschaften) => {
    state.progressList.splice(state.progressList.findIndex(item=>item.path == props), 1) // Lösche das Fortschrittsobjekt in der Fortschrittsliste},
  ...
}

<Vorlage>

</Vorlage>

<Skript>
  importiere { mapState } von 'vuex'

  Standard exportieren {
    Name: 'downLoadNotice',
    berechnet: {
      ...mapState({
      „Fortschrittsliste“: Status => Status.Fallinformation.Fortschrittsliste
    })
    },
    Daten() {
      zurückkehren {
        benachrichtigen: {} // Wird verwendet, um das Popup-Fensterobjekt für den Download-Dateifortschritt beizubehalten}
    },
    watch: { //Fortschrittsliste überwachen progressList: {
        Handler(n) {
          let Daten = JSON.parse(JSON.stringify(n))
          Daten.fürJeden(Element => {
            const domList = [...document.getElementsByClassName(item.path)]
            if (domList.find(i => i.className == item.path)) { // Wenn die Seite bereits ein Popup-Fenster für das Fortschrittsobjekt hat, aktualisiere dessen Fortschritt
              domList.find(i => i.className == item.path).innerHTML = item.progress + '%'
            } anders {
              if (item.progress === null) { // Fehlertolerante Verarbeitung hier, wenn der Backend-Übertragungsdateistream einen Fehler meldet, löschen Sie das aktuelle Fortschrittsobjekt this.$store.commit('caseInformation/DEL_PROGRESS', item.path)
                zurückkehren
              }// Wenn auf der Seite kein Popup-Fenster vorhanden ist, das dem Fortschrittsobjekt entspricht, erstellen Sie auf der Seite ein neues Popup-Fenster und fügen Sie das Popup-Fensterobjekt zur Benachrichtigung hinzu. Der Attributname ist der Pfad des Fortschrittsobjekts (wie oben erwähnt, ist der Pfad eindeutig) und der Attributwert ist $notify (Benachrichtigungskomponente im Element UI) Popup-Fensterobjekt this.notify[item.path] = this.$notify.success({
                // Titel: 'Info',
                dangerouslyUseHTMLString: true,
                Nachricht: `<p style="width: 100px;">Herunterladen<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // Zeigt den Download-Prozentsatz an, der Klassenname ist der Pfad des Fortschrittsobjekts (um die Aktualisierung des Fortschrittsprozentsatzes später zu erleichtern)
                showClose: false,
                Dauer: 0
              })
            }
            Konsole.log(Element.Fortschritt + '%', '-------------------------->')

            if (item.progress == 100) { // Wenn der Download-Fortschritt 100 % erreicht, schließe das Popup-Fenster und lösche das in der Benachrichtigung this.notify[item.path].close() verwaltete Popup-Fensterobjekt.
              // lösche this.notify[item.path] Das oben genannte close()-Ereignis ist asynchron. Es hier direkt zu löschen, führt zu einem Fehler. Verwenden Sie setTimeout, um den Vorgang zur asynchronen Warteschlange hinzuzufügen setTimeout(() => {
                lösche this.notify[item.path]
              }, 1000)
              this.$store.commit('caseInformation/DEL_PROGRESS', item.path) // Lösche das Fortschrittsobjekt in der Fortschrittsliste des Status in caseInformation}
          })
        },
        tief: wahr
      }
    }
  }
</Skript>

<Stilbereich>

</Stil>

herunterladen(Artikel){
   lass runterDaten = {
      URL: `ipdoc${item.url}`,
      herunterladen: item.fileName
   }
   this.$commonUtils.downLoadAll(downData) // herunterladen},