Introduction à la méthode de mise en œuvre de plusieurs tâches en un seul téléchargement à l'aide de javascript

Ce que cet article vous apporte est une explication détaillée de la mise en œuvre de la synergie PHP (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Expérience réelle

Les projets de développement récents nécessitent le téléchargement de fichiers. C'est assez simple quand on y pense, je l'ai déjà fait. et le front-end utilise simplement window.location.href C'est tout. Cependant, lors du développement, j'ai constaté que certains fichiers contenaient des fichiers joints. Cliquer sur le bouton Télécharger nécessite le téléchargement de deux fichiers et le package compressé ne peut pas être utilisé. À bien y penser, c'est assez simple. Cliquez simplement sur Télécharger et envoyez deux demandes de téléchargement et vous avez terminé.

Je viens de le faire, et cela s'est fait en trois coups, cinq divisés par deux. Lorsque j'ai cliqué sur le bouton de téléchargement, j'ai été abasourdi. La première demande a été automatiquement annulée, et tout à coup dix mille chevaux de boue d'herbe se sont précipités. passé (Parce qu'il s'agit d'un serveur étranger, le téléchargement est lent et la première demande est annulée), ce qui signifie que cliquer rapidement sur différents boutons de téléchargement aura le même problème, puis j'ai commencé mon propre voyage d'exploration de téléchargement.

Nous savons que si la balise a et href pointent vers un lien de téléchargement, cela équivaut au téléchargement d'un fichier. C'est toujours ok pour les téléchargements de fichiers uniques, mais cliquez quelques instants. Il y a un bouton de téléchargement. Certains téléchargements seront annulés. Ce n'est pas acceptable.

Code précédent :

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

Nous savons que window.open peut ouvrir une nouvelle fenêtre, alors peut-il être téléchargé, je suis excité, je le fais rapidement ? je l'ai essayé, et il était effectivement possible de télécharger, mais une nouvelle fenêtre s'ouvrait et se fermait rapidement. L'expérience était très mauvaise, alors j'ai abandonné de manière décisive.

Je me suis soudain rendu compte qu'iframe pouvait également envoyer des requêtes au serveur. J'étais tellement excité que je l'ai rapidement réessayé, Wow, il peut être téléchargé, et il n'y en a pas. sentiment de violation. J'ai posté le code.

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 : les iframes ne s'affecteront pas et peuvent être téléchargées en continu

Bien sûr, il existe d'autres méthodes, comme le téléchargement de formulaire, le binaire ! téléchargement de flux, etc. , si vous avez le temps, étudiez-le vous-même !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!