循环遍历文件 url 数组并使用 React 下载每一个

IT技术 javascript arrays reactjs download
2021-05-17 14:37:24

我正在尝试做我“认为”是一项简单的任务。我有一组 URL,当用户单击按钮时,我希望循环遍历这些 URL 并下载到客户端计算机上。

现在我有一个父组件,其中包含我想要循环和下载的按钮和一组 url(处于状态)。出于某种原因,我现在这样做的方式只下载其中一个文件,而不是数组的所有内容。

知道如何在 React 中正确执行此操作吗?

handleDownload(event){
        var downloadUrls = this.state.downloadUrls;
        downloadUrls.forEach(function (value) {
            console.log('yo '+value)
        const response = {
              file: value,
        };                
            window.location.href = response.file;

        })
    }
1个回答

我会使用 setTimeout 在下载每个文件之间等待一点。

handleDownload(event){
    var downloadUrls = this.state.downloadUrls.slice();
    downloadUrls.forEach(function (value, idx) {
        const response = {
          file: value,
        };
        setTimeout(() => {
            window.location.href = response.file;
        }, idx * 100)
    })
}

在 Chrome 中,这也会提示要求下载多个文件的权限。