如何在Webix中批量下载文件至文件夹？解决单文件保存问题

我来帮你搞定这个问题！首先得搞清楚为什么注释掉webix.message就只存第二个文件——这是因为浏览器对连续发起的下载请求有优化策略，会把几乎同时的请求合并，导致第一个请求被覆盖了，而webix.message相当于给第一个请求加了个短暂的延迟，让两个请求错开了。

方法一：给每个下载请求添加微小延迟 #

不用webix.message的话，我们可以手动给每个下载操作加个小延迟，让浏览器能分别处理两个请求。修改你的getFiles()函数就行：

function getFiles(){
  const files = ["file1.txt", "file2.txt"];
  files.forEach((file, index) => {
    // 每个请求延迟100ms，错开时间
    setTimeout(() => {
      webix.toExcel({
        columns:[{id:"value"}],
        data:[{value:"Content of " + file}]
      }, {
        filename: file,
        filterHTML:true
      });
    }, index * 100);
  });
}

这个方法简单直接，利用setTimeout让两个下载请求先后触发，避免浏览器合并它们，这样两个文件都能保存下来。

方法二：将两个文件打包成ZIP下载（实现"同一文件夹"效果） #

浏览器本身不允许我们指定下载的文件夹（这是出于安全和用户权限的考虑），但我们可以把两个文件打包成一个ZIP文件，用户下载后解压就能得到同一文件夹下的两个文件。

你可以用JSZip库来实现这个功能，步骤如下：

1. 引入JSZip库（可以通过CDN或者本地引入）
2. 修改getFiles()函数，生成两个文件的Blob，打包成ZIP后下载：

function getFiles(){
  // 创建JSZip实例
  const zip = new JSZip();
  
  // 添加第一个文件
  zip.file("file1.txt", "Content of file1.txt");
  // 添加第二个文件
  zip.file("file2.txt", "Content of file2.txt");
  
  // 生成ZIP并下载
  zip.generateAsync({type:"blob"}).then(function(content) {
    // 创建下载链接
    const link = document.createElement('a');
    link.href = URL.createObjectURL(content);
    link.download = "my_files.zip";
    link.click();
    // 释放URL对象
    URL.revokeObjectURL(link.href);
  });
}

这个方案不仅解决了连续下载的问题，还能让用户一次性获取两个文件，解压后自然就在同一文件夹里了，体验更好。

总结 #

• 要保存两个文件且不用webix.message，要么给每个下载加小延迟，要么打包成ZIP；
• 浏览器无法直接指定下载文件夹，但打包成ZIP可以间接实现用户拿到同一文件夹下的文件的需求。

内容的提问来源于stack exchange，提问作者A.G.Progm.Enthusiast