JS下载多个文件

我的目标是有一个脚本来下载给定数组内的所有文件：

    var links = ['http://file-examples.com/wp-content/uploads/2017/10/file_example_JPG_100kB.jpg',
'http://file-examples.com/wp-content/uploads/2017/10/file_example_TIFF_1MB.tiff'];

function downloadAll(urls) {
  var link = document.createElement('a');
  link.setAttribute('download', null);
  link.style.display = 'none';
  document.body.appendChild(link);
  for (var i = 0; i < urls.length; i++) {
    link.setAttribute('href', urls[i]);
    link.click();
  }
  document.body.removeChild(link);
}
downloadAll(window.links)

在（我相信）最新的 chrome 更新之前，一切都很顺利。

我一直在收集信息，但似乎还没有可用的修复方法。

有人可以帮忙吗？基本上希望有一个在 JS 中工作的多文件下载脚本。

先谢谢您的帮助！

Using 文件系统访问API，我们可以实现相同的目标。

async function DownloadFiles(paramToFiles) {
   try {
       var dirHandle = await window.showDirectoryPicker({
           startIn: 'videos',//default folder
           mode: 'readwrite'//ask for write permission
       });//move script from function startDownload to here, because of an error "SecurityError: Failed to execute 'showDirectoryPicker' on 'Window': Must be handling a user gesture to show a file picker.". It was working on localhost.
       for (var index in paramToFiles.Files) {
          var file = paramToFiles.Files[index];
          const fileHandle = await dirHandle.getFileHandle(file.FileName, { create: true });
          if (await verifyPermission(fileHandle, true)) {
              const writable = await fileHandle.createWritable();
              await writable.write(await getBlob(file.URL));
              await writable.close();
          }
      }
   }
   catch (error) {
       alert(error);
   }
   return false;
}
async function startDownload(dirHandle, paramToFiles) {
   //move above
}
async function verifyPermission(fileHandle, readWrite) {
   const options = {};
   if (readWrite) {
       options.mode = 'readwrite';
   }
   if ((await fileHandle.queryPermission(options)) === 'granted') {
       return true;
   }
   if ((await fileHandle.requestPermission(options)) === 'granted') {
       return true;
   }
   return false;
}
function getBlob(urlToGet) {
   const blob = fetch(urlToGet).then(data => data.blob());
   return blob;
}

你可以这样称呼它。

<script>
   function doDownload() {
      DownloadFiles({
         'Files': [
            {
               'FileName': 'Download-Nih-01.zip',
               'URL': '/Download/Download-Nih-01.zip'
            },
            {
               'FileName': 'Download-Nih-02.zip',
               'URL': '/Download/Download-Nih-02.zip'
            },
            {
               'FileName': 'Download-Nih-03.zip',
               'URL': '/Download/Download-Nih-03.zip'
            }
         ]
      });
   ​}
   ​const butDow = document.getElementById('doDownload');
   ​butDow.addEventListener('click', async () => doDownload())
​</script>

关于此实现，需要注意以下几点：

1. 这只适用于您的网站使用 HTTPS 的情况，如果您尝试使用 HTTP 访问它，则会抛出错误类型错误：window.showDirectoryPicker 不是函数.
2. 这是实验性的，因此预计未来的行为会发生变化。
3. 用户必须在执行此脚本之前执行操作（例如：单击按钮），并确保该操作不会回发。

这是我用来测试的按钮声明。

<button type="button" id="doDownload">Download</button>

截至撰写本文时（2021 年 8 月 18 日），该 API 受 chrome、edge 和 opera 支持。 我已经使用 ms Edge (chromium) 及其工作原理对其进行了测试。

ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker