准备下载时等待动画并自动下载

Question

其实是一个简单的任务，但我只是找不到合适的解决方案

1. 数据以一种形式收集（HTML）
2. 发送后，服务器需要几秒钟的时间来提供下载，一个 ZIP 文件
3. 在此期间，应显示动画或叠加层
4. 下载内容应显示在浏览器中（例如右上角的 Chrome）。
5. 该页面不应离开。

不幸的是我无法让它工作，要么动画正常工作但下载仅短暂“闪烁”，或者下载正确显示但动画重置不起作用。

我已经在这里阅读了很多相关内容，但不幸的是它并没有真正起作用，也许有人可以提供帮助？

Answer 1

非常感谢您的努力！ 我现在找到了解决办法：

   $(document).ready(function () {
       function showLoading() {
           $('#waitinginfo').fadeIn();
       }
       function hideLoading() {
           $('#waitinginfo').fadeOut();
       }

       $("#frmexport").submit(function (event) {

           var formData = new FormData(this);

           showLoading();

           $.ajax({
               type: "POST",
               url: "testdownload", 
               data: formData,
               success: function (response) {
                   hideLoading();
                   var blob = new Blob([response], { type: 'application/octet-stream' });
                   var downloadLink = $("<a>")
                       .attr("href", window.URL.createObjectURL(blob))
                       .attr("download", "generated-file.txt")
                       .text("Datei herunterladen");

                   $("body").append(downloadLink);
                   downloadLink[0].click();
                   downloadLink.remove();

               },
               error: function (error) {
                   
                   console.error("Error: ", error);
               }
           });
           event.preventDefault();
       });
   });

技巧在于创建后，会在应用点击事件的 DOM 中创建一个“虚拟”a 标签。由于代码最终是在 MVC .NET Core 应用程序中动态生成的，因此

type: 'application/octet-stream'

和

.attr("download", "generated-file.txt")

相应地动态放置在脚本中。