JavaScriptを使って一度のダウンロードで複数のタスクを実装する方法の紹介-jsチュートリアル-php.cn

JavaScriptを使って一度のダウンロードで複数のタスクを実装する方法の紹介

不言

リリース： 2018-10-23 15:27:13

転載

2338 人が閲覧しました

この記事では、PHP シナジーの実装について詳しく説明します (コード付き)。必要な方は参考にしていただければ幸いです。

実際の経験

最近の開発プロジェクトではファイルのダウンロードが必要です。私が以前にそれを行ったことがあることを考えると、それは非常に簡単です。フロントエンドは window を使用します。しかし、開発中に、一部のファイルにファイルが添付されていることがわかりました。ダウンロードボタンをクリックすると、2 つのファイルをダウンロードする必要があり、圧縮パッケージは使用できません。考えてみると、[ダウンロード] をクリックして 2 つのダウンロードリクエストを送信するだけで完了です。

実行してください。5 を 2 で割った 3 画で書かれていました。ダウンロードしようとクリックすると、最初のリクエストが自動的にキャンセルされ、突然 10,000 頭の草泥馬が押し寄せてきました。これは、別のダウンロードボタンをすばやくクリックすると同じ問題が発生することを意味します。これは良くないことです。そこで、私は独自のダウンロード探索の旅を始めました。

a tag & location.hrefa タグと href がダウンロードリンクを指している場合は、ファイルをダウンロードするのと同じであることがわかりますが、単一ファイルのダウンロードには問題ありません。ただし、いくつかのダウンロードボタンをクリックすると、ダウンロードがキャンセルされます。これは受け入れられません。

前のコード:

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

ログイン後にコピー

window.openwindow.open が新しいウィンドウを開くことができることはわかっているので、ダウンロードすることはできるのでしょうか?早速試してみました試してみたところ、確かにダウンロードはできましたが、すぐに新しいウィンドウが開いたり閉じたりしてしまい、非常に使い勝手が悪かったので、思い切って諦めました。

iframeiframe もサーバーにリクエストを送信できることを突然思いつき、すぐに試してみました。おお、ダウンロードできました。違反の感覚でコードを投稿しました。

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: iframe は相互に影響を与えず、継続的にダウンロードできます!

その他の解決策もちろん、フォームのダウンロード、バイナリストリームのダウンロードなど、他の方法もあります。、など、Sora の友達がいます。自分で調べてください!

以上がJavaScriptを使って一度のダウンロードで複数のタスクを実装する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。