Clever Geek Handbook

ブラウザの制限を回避して一度に2つ以上のファイルを添付する方法：複数ファイルの添付

こんにちは、Habr！



自明でない問題を解決しましょう。たとえば、[ファイルのダウンロード]ボタンをクリックするなど、基本的な方法でインターフェイスを介してデータをダウンロードする必要があると想像してください。



デフォルトのChromev.88を見てみましょう。タスクは次のように聞こえます。



  • クライアント側のファイルを生成します。
  • 生成されたすべてのファイルをワンクリックでダウンロードします。


バイナリの束、バックアップ付きの大規模なアーカイブ、写真のギャラリーなど、何でもかまいません。ダウンロードメカニズム自体について具体的に説明するので、例としてテキストと画像のダウンロードを取り上げます。





もちろん、必要なすべてのファイルを1つのZIPアーカイブに圧縮してからダウンロードするだけで、この問題を解決できます。ユーザーが単一のファイルをダウンロードし、それを自分で解凍することが判明しました。たとえば 、jszipライブラリを使用すると、ファイルを圧縮してダウンロードできます。



ドキュメントからの事前圧縮されたダウンロードの小さな例を次に示します。 



var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true}); zip.generateAsync({type:"blob"}).then(function(content) {
// see FileSaver.js
saveAs(content, "example.zip"); });


「ここの自明性はどこにありますか？」- あなたが尋ねる。そして、あなたは正しいでしょう。また、サイトから2つ、3つ、または10個のファイルを同時にダウンロードすることについて話している場合はどうでしょうか。例：selectには、ダウンロードする特定の数のファイルを選択できるリストがあります。追加の条件を導入しましょう。ユーザーにアーカイバがインストールされていないため、アーカイブへの圧縮を使用してオプションを破棄します。この問題を解決する方法は？



まず、ブラウザを準備しましょう。Chromeは、デフォルトでマルチファイルのダウンロードを禁止しています。これはセキュリティ上の理由によるものです。したがって、この機能は最初にブラウザの設定でロックを解除する必要があります。



  1. サイトの設定に移動します：chrome：//設定/コンテンツ。
  2. 追加の権限に移動します。
  3. 自動ダウンロードを選択します。
  4. 必要なサイトを[許可]カテゴリに追加します。








これで、ブラウザの 安全性が低下し、特定のサイトに複数のファイルを一度にダウンロードできるようになりました。



アプローチ＃1-FileReader



FileReaderとbase64読み取りAPIを使用してファイルを生成する例を使用した最初のアプローチを見てみましょう。FileReaderにはかなり広範なAPIがあることにすぐに気付きました。そのため、text、arrayBuffer、binaryStringなどの最も好きなものを選択してください。 



(function () {
  const button = document.getElementById("download_with_reader");
  const content = ["content-1", "content-2", "content-3"];
    const createLink = () => {
    let link = document.createElement('a');
    link.download = 'hello.txt';
    return link;
  }
    const generateBlob = () => {
    for (const [index, value] of content.entries()) {
      const blob = new Blob([value], { type: "text/plain" });
      download(blob, index);
    }
  }
  const download = (blob, index) => {
    const link = createLink();
    let reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function () {
      link.href = reader.result;
      link.download = `content-${index+1}.txt`;
      link.click();
    }
  }
    button.addEventListener("click", generateBlob);
}) ();


[Gitlabのコード]



アプローチ＃2-createObjectURL



createObjectURLを使用することもできます。これにより、ファイルオブジェクトまたはBlobを保存できます。 



(function () {
  const button = document.getElementById("download_with_url_object");
  const content = ["content-1", "content-2", "content-3"];
  
  const createLink = () => {
    let link = document.createElement('a');
    link.download = 'hello.txt';
    return link;
  }
  const generateBlob = () => {
    for (const [index, value] of content.entries()) {
      const blob = new Blob([value], { type: "text/plain" });
      download(blob, index);
    }
  }
  const download = (blob, index) => {
    const link = createLink();
    link.href = URL.createObjectURL(blob);
    link.download = `content-${index+1}.txt`;
    link.click();
    URL.revokeObjectURL(link.href);
  }
   button.addEventListener("click", generateBlob);
}) ();


[Gitlabのコード]



アプローチ＃3-URLからダウンロード



上記の2つのオプションは、クライアント側のファイルを生成します。もちろん、これが常に当てはまるとは限りません。バックエンドから直接リンクを介してファイルを受け取ることがあります。これは、URLからダウンロードすることで実行できます。Chromeにはレイテンシが必要なため、人工レイテンシの実装がこのメソッドの機能になります。 



(function () {
(function () {
  const button = document.getElementById("download_with_request");
  const urls = ["images/image-1.jpg", "images/image-2.jpg", "images/image-3.jpg"];
  
  const delay = () => new Promise(resolve => setTimeout(resolve, 1000));
  
  const downloadWithRequest = async () => {
    for await (const [index, url] of urls.entries()) {
      await delay();
      const link = document.createElement("a");
      link.href = url;
      link.download = `image-${index+1}`;
      link.click();
    }
  }
  
  button.addEventListener("click", downloadWithRequest);
}) ();


[Gitlabのコード]



合計



これは、サイトから複数のファイルを同時にダウンロードしてすばやく実行できる3つの非常に簡単な方法です。主なことは、特定のサイトに必要な権限をオンにしてから、好きな方法を選択することです。


More articles:


All Articles