【解決方法】jszip を使用して zip ファイルからすべての画像を抽出できない

[ad_1]

以下のコードを使用すると、10 個の画像しかダウンロードできませんが、実際にはその ZIP フォルダーには約 450 個の画像が含まれています。

私が試したこと：

function unzipfeb146() {
            var i = 0;
           // fetch('file:///C:/CBTOffline/Images/8687.Zip')
            fetch('http://localIP/CBT/R3Images/QBQuestionImages/8688.zip')
                .then(response => response.arrayBuffer())
                .then(data => {
                    // Extract the files from the zip
                    const zip = new JSZip();
                    return zip.loadAsync(data);
                })
                .then(zip => {
                    // Download each file
                    Object.keys(zip.files).forEach(filename => {
                        debugger;
                        zip.files[filename].async('blob').then(blob =>
                        {
                            const link = document.createElement('a');
                            link.href = URL.createObjectURL(blob);
                            link.download = filename;
                            document.body.appendChild(link);
                            link.click();
                           

                            var img = document.createElement("img");
                            img.src = URL.createObjectURL(blob);
                            img.id = i+1;
                            document.body.appendChild(img);
                            i = i + 1;
                            //const image = new Image();
                            //image.src = URL.createObjectURL(blob);
                            //image.id = fileName;
                            //document.body.appendChild(image);

                            //document.body.removeChild(link);
                        });
                    });
                })
                .catch(error => console.error(error));
        }

解決策 2
解決策 1

解決策 2

Chris が述べたように、ブラウザのダウンロード動作に問題がある可能性があります。一部のブラウザーでは、セキュリティ上の理由から複数のファイルの自動ダウンロードができない場合があるため、ユーザーが各ファイルのダウンロードを開始できるようにする方法を実装する必要がある場合があります。
別の問題として、すべてのファイルに有効な画像拡張子 (jpg、png など) が付いているわけではない可能性があります。
上記のコードを使用して、画像拡張子のチェックを含む次の機能を試すことができます –

function unzipfeb146() {
  fetch('http://localIP/CBT/R3Images/QBQuestionImages/8688.zip')
    .then(response => response.arrayBuffer())
    .then(data => JSZip.loadAsync(data))
    .then(zip => {
      // Filter the files to only include image files
      const imageFiles = Object.keys(zip.files)
        .filter(filename => /\.(jpe?g|png|gif)$/i.test(filename));

      // Download each image file
      imageFiles.forEach((filename, index) => {
        zip.file(filename)
          .async('blob')
          .then(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            const img = document.createElement('img');
            img.src = URL.createObjectURL(blob);
            img.id = `image-${index}`;
            document.body.appendChild(img);
          });
      });
    })
    .catch(error => console.error(error));
}

解決策 1

圧縮されたファイルのダウンロードリンクを作成するには、次のように、圧縮されたファイルの場所を指す href 属性を持つタグを使用できます。

HTML

<a href="path/to/your/file.zip">Download file</a>

[ad_2]