Einführung in die Methode zur Implementierung mehrerer Aufgaben bei einem Download mithilfe von Javascript

Dieser Artikel bietet Ihnen eine detaillierte Erklärung der PHP-Synergie-Implementierung (mit Code). Freunde in Not können sich darauf beziehen.

Echte Erfahrung

Aktuelle Entwicklungsprojekte erfordern das Herunterladen von Dateien, wenn man darüber nachdenkt. Der Hintergrund bietet eine Download-Schnittstelle. und das Frontend verwendet einfach window.location.href Das war's. Während der Entwicklung habe ich jedoch festgestellt, dass einige Dateien Dateien angehängt haben. Wenn Sie auf die Schaltfläche „Herunterladen“ klicken, müssen zwei Dateien heruntergeladen werden, und das komprimierte Paket kann nicht verwendet werden. Denken Sie darüber nach, es ist ganz einfach. Klicken Sie einfach auf „Herunterladen“, senden Sie zwei Download-Anfragen und schon sind Sie fertig. Ich habe es einfach gemacht, und es war in drei Schritten, fünf geteilt durch zwei, als ich zum Herunterladen klickte, war ich fassungslos. Die erste Anfrage wurde automatisch abgebrochen und plötzlich stürmten zehntausend Grasschlammpferde vorbei (Da es sich um einen fremden Server handelt, ist der Download langsam und die erste Anfrage wird abgebrochen.) Das bedeutet, dass beim schnellen Klicken auf verschiedene Download-Schaltflächen das gleiche Problem auftritt. Das ist nicht gut, und dann habe ich meine eigene Download-Erkundungsreise begonnen.

a tag & location.href

Wir wissen, dass es dem Herunterladen einer Datei gleichkommt, wenn a tag und href auf einen Download-Link verweisen. Für den Download einzelner Dateien ist das immer noch in Ordnung. aber klicken Sie ein paar Mal schnell. Es gibt einen Download-Button. Dies ist nicht akzeptabel.

Vorheriger Code:

const download = (url)=>{
   window.location.href = url;
}

window.open

Wir wissen, dass window.open ein neues Fenster öffnen kann. Ist es also möglich, es herunterzuladen? Ich habe es schnell versucht und es war zwar möglich, es herunterzuladen, aber ein neues Fenster öffnete und schloss sich schnell. Die Erfahrung war sehr schlecht, also habe ich entschieden aufgegeben.

iframe

Mir fiel plötzlich auf, dass iframe auch Anfragen an den Server senden kann. Ich war so begeistert, dass ich es schnell noch einmal ausprobiert habe, und es gibt keine Ich habe den Code gepostet.

export const downloadFile = (url) => {
  const iframe = document.createElement("iframe");
  iframe.style.display = "none"; // 防止影响页面
  iframe.style.height = 0; // 防止影响页面
  iframe.src = url; 
  document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
  // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
  setTimeout(()=>{
    iframe.remove();
  }, 5 * 60 * 1000);
}

ps: Iframes beeinflussen sich nicht gegenseitig und können kontinuierlich heruntergeladen werden!

Andere Lösungen

Natürlich gibt es auch andere Möglichkeiten, wie z. B. Formular-Download, Binär-Stream-Download usw. Sora-Freunde, recherchiert bitte selbst!

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Implementierung mehrerer Aufgaben bei einem Download mithilfe von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!