Wie lädt Vue Dateien mit unterschiedlichem Ursprung basierend auf der URL herunter?

importiere Axios von „Axios“;
// Laden Sie die Datei herunter (kann das domänenübergreifende Downloadproblem lösen)
Exportieren Sie die asynchrone Funktion „DownloadFile (Datei-URL, Dateiname)“ {
  wenn (!fileUrl) zurückgeben;
  lass res = warte auf axios({
    Methode: "get",
    URL: Datei-URL,
    Antworttyp: „Blob“
  });
  neue URL = window.URL.createObjectURL(res.data);
  sei a = document.createElement("a");
  a.href = neueUrl;
  a.download = Dateiname;
  ein.Klick();
  a.entfernen();
  //Nachdem der Ressourcendownload abgeschlossen ist, können Sie die von createObjectURL belegten Cache-Ressourcen manuell löschen. window.URL.revokeObjectURL(newUrl);
}

<Vorlage>
  <div>
      {{Dateiname}}
      <span
        Klasse="Datei-Download"
        @click="downloadFile(datei.url, datei.name)"
        >Herunterladen
      >
  </div>
</Vorlage>

<Skript>
importiere { Download-Datei } von "@/util/index.js";
Standard exportieren {
  Komponenten: {},
  Daten() {
    zurückkehren {
      Datei:{
          URL: „https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F960x600%2F1426818724752.jpg&refer=http%3A%2F%2Fb.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627377638&t=662034e86ff9110854ca0316485e294b“,
          Name: „Schöne Landschaft“
      }
    };
  },
  erstellt() {},
  montiert() {},
  Methoden: {
    Datei herunterladen
  }
};
</Skript>

<style lang="scss" scoped>

</Stil>

/*
 * Das Backend gibt die URL der Datei zurück und das Frontend erstellt ein Tag zum Herunterladen*
 * 1. Das Problem wurde behoben, dass, wenn es sich bei der Datei um ein Bild oder ein vom Browser unterstütztes Format handelt, die Datei direkt beim Klicken auf „Herunterladen“ geöffnet wird.
 * 2. Beim Herunterladen von Dateien kann es zu einem Flackern des Browsers kommen*
 * Auf der Seite verwenden * 1. Importieren Sie die Direktive import downLoad von '@/directive/down-load-url'
 * 2. Anweisungen registrieren: {downLoad}
 * 3. Verwenden Sie es als Befehl auf der Download-Schaltfläche, zum Beispiel: <el-button v-downLoad="url">Download</el-button>
 */

importiere downLoad von './downLoad'

const installieren = Funktion(Vue) {
  Vue.direktive('downLoadUrl', herunterladen)
}

downLoad.install = installieren

Exportieren Standard-Download
download-load-url/downLoad.js Datei exportieren Standard {
  binden(el, Bindung) {
    el.addEventListener('klicken', () => {
      konsole.log(Bindung.Wert) // URL
      const a = document.createElement('a')
      // let url = baseUrl + binding.value // Wenn die URL unvollständig ist, müssen Sie baseURL verketten
      const url = binding.value // Es wird direkt die komplette URL verwendet // Hier wird die URL in eine Blob-Adresse umgewandelt,
      fetch(url).then(res => res.blob()).then(blob => { // Konvertiere den Inhalt der Link-Adresszeichenfolge in eine Blob-Adresse a.href = URL.createObjectURL(blob)
        konsole.log(a.href)
        a.download = '' // Name der heruntergeladenen Datei// a.download = url.split('/')[url.split('/').length -1] // // Name der heruntergeladenen Dateidocument.body.appendChild(a)
        ein.Klick()
      })
    })
  }
}