生成文件以供下载时如何显示加载动画？答案

【问题标题】：How to display a loading animation while file is generated for download?生成文件以供下载时如何显示加载动画？
【发布时间】：2025-11-22 06:25:01
【问题描述】：

我有一个网络应用程序，用户可以在其中生成 PDF 和 PowerPoint 文件。这些文件可能需要一些时间来生成，所以我希望能够在它生成时显示加载动画。这里的问题是我不知道什么时候开始下载。动画永远不会消失。

我知道可以在“侧面”生成文件并在文件准备好使用 AJAX 下载时提醒用户，但我更喜欢在用户等待下载开始时“锁定”用户.

【问题讨论】：

标签： javascript php jquery

【解决方案1】：

要了解这里需要做什么，让我们看看这种请求通常会发生什么。

用户点击按钮请求文件。
生成文件需要时间（用户得不到反馈）。
文件完成并开始发送给用户。

我们想要添加的是一个反馈，让用户知道我们在做什么......在第 1 步和第 2 步之间，我们需要对点击做出反应，并且我们需要找到一种方法来检测何时发生第 3 步删除视觉反馈。我们不会让用户知道下载状态，他们的浏览器会像处理任何其他下载一样执行此操作，我们只是想告诉用户我们正在处理他们的请求。

为了让文件生成脚本与请求者页面的脚本进行通信，我们将使用 cookie，这将确保我们不依赖于事件、iframe 等浏览器。在测试了多种解决方案之后，从 IE7 到最新的手机，这似乎是最稳定的。

步骤 1.5：显示图形反馈。

我们将使用 javascript 在屏幕上显示通知。我在整个页面上选择了一个简单的透明黑色覆盖层，以防止用户与页面的其他元素进行交互，因为点击链接可能会使他失去接收文件的可能性。

$('#downloadLink').click(function() {
  $('#fader').css('display', 'block');
});

#fader {
  opacity: 0.5;
  background: black;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="fader"></div>

  <a href="#path-to-file-generator" id="downloadLink">Click me to receive file!</a>
</body>

步骤 3.5：移除图形显示。

简单的部分已经完成，现在我们需要通知 JavaScript 文件正在下载。当一个文件被发送到浏览器时，它会与通常的 HTTP 标头一起发送，这允许我们更新客户端 cookie。我们将利用此功能提供适当的视觉反馈。让我们修改上面的代码，我们需要设置cookie的起始值，并监听它的修改。

var setCookie = function(name, value, expiracy) {
  var exdate = new Date();
  exdate.setTime(exdate.getTime() + expiracy * 1000);
  var c_value = escape(value) + ((expiracy == null) ? "" : "; expires=" + exdate.toUTCString());
  document.cookie = name + "=" + c_value + '; path=/';
};

var getCookie = function(name) {
  var i, x, y, ARRcookies = document.cookie.split(";");
  for (i = 0; i < ARRcookies.length; i++) {
    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
    x = x.replace(/^\s+|\s+$/g, "");
    if (x == name) {
      return y ? decodeURI(unescape(y.replace(/\+/g, ' '))) : y; //;//unescape(decodeURI(y));
    }
  }
};

$('#downloadLink').click(function() {
  $('#fader').css('display', 'block');
  setCookie('downloadStarted', 0, 100); //Expiration could be anything... As long as we reset the value
  setTimeout(checkDownloadCookie, 1000); //Initiate the loop to check the cookie.
});
var downloadTimeout;
var checkDownloadCookie = function() {
  if (getCookie("downloadStarted") == 1) {
    setCookie("downloadStarted", "false", 100); //Expiration could be anything... As long as we reset the value
    $('#fader').css('display', 'none');
  } else {
    downloadTimeout = setTimeout(checkDownloadCookie, 1000); //Re-run this function in 1 second.
  }
};

#fader {
  opacity: 0.5;
  background: black;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="fader"></div>

  <a href="#path-to-file-generator" id="downloadLink">Click me to receive file!</a>
</body>

好的，我们在这里添加了什么。我已经放了我使用的set/getCookie函数，不知道是不是最好的，但是效果很好。当我们开始下载时，我们将 cookie 值设置为 0，这将确保任何其他过去的执行都不会干扰。我们还启动一个“超时循环”来每秒检查 cookie 的值。这是代码中最有争议的部分，使用超时循环函数调用等待 cookie 更改可能不是最好的，但它是在所有浏览器上实现这一点的最简单方法。因此，我们每秒都会检查 cookie 的值，如果该值设置为 1，我们会隐藏褪色的视觉效果。

更改 cookie 服务器端

在 PHP 中，可以这样做：

setCookie("downloadStarted", 1, time() + 20, '/', "", false, false);

在 ASP.Net 中

Response.Cookies.Add(new HttpCookie("downloadStarted", "1") { Expires = DateTime.Now.AddSeconds(20) });

cookie 的名称是 downloadStarted，它的值是 1，它会在 NOW + 20seconds 过期（我们每秒检查一次，所以 20 就足够了，如果你在javascript），它的路径在整个域上（根据自己的喜好更改），它不安全，因为它不包含敏感数据，而且它不是 HTTP，所以我们的 JavaScript 可以看到它。

瞧！总结起来就是这样。请注意，提供的代码在我正在使用的生产应用程序上完美运行，但可能不适合您的确切需求，请根据您的喜好进行更正。

【讨论】：

这里是 ASP.Net 的服务器端代码 Response.Cookies.Add(new HttpCookie("downloadStarted", "1") { Expires = DateTime.Now.AddSeconds(20) });跨度>
谢谢，已添加到答案中
谢谢你，这非常有用，因为我的 pdf 需要 20 多秒才能生成！
天哪！！！这是最了不起的事情。太感谢了。我逐字复制了您的代码，然后当然更改了变量名，瞧！太酷了！

【解决方案2】：

您可以使用 ajax 添加指示符获取文件，然后使用 dataURI 创建一个标签并使用 JavaScript 点击它：

您将需要此库的帮助：https://github.com/henrya/js-jquery/tree/master/BinaryTransport

var link = document.createElement('a');
if (link.download != undefined) {
    $('.download').each(function() {
        var self = $(this);
        self.click(function() {
            $('.indicator').show();
            var href = self.attr('href');
            $.get(href, function(file) {
                var dataURI = 'data:application/octet-stream;base64,' + btoa(file);
                var fname = self.data('filename');
                $('<a>' + fname +'</a>').attr({
                    download:  fname,
                    href: dataURI
                })[0].click();
                $('.indicator').hide();
            }, 'binary');
            return false;
        });
    });
}

你可以在caniuse看到下载属性支持

并在你的 html 中输入：

<a href="somescript.php" class="download" data-filename="foo.pdf">generate</a>

【讨论】：

【解决方案3】：

这是 Salketer 出色答案的简化版本。它只是检查 cookie 的存在，而不考虑它的值。

提交表单后，它将每秒轮询 cookie 的存在。如果 cookie 存在，则仍在处理下载。如果没有，则下载完成。有 2 分钟的超时时间。

HTML/JS 页面：

var downloadTimer;  // reference to timer object

function startDownloadChecker(buttonId, imageId, timeout) {
    var cookieName = "DownloadCompleteChecker";
    var downloadTimerAttempts = timeout;    // seconds

    setCookie(cookieName, 0, downloadTimerAttempts);

    // set timer to check for cookie every second
    downloadTimer = window.setInterval(function () {
        var cookie = getCookie(cookieName);

        // if cookie doesn't exist, or attempts have expired, re-enable form
        if ((typeof cookie === 'undefined') || (downloadTimerAttempts == 0)) {
            $("#" + buttonId).removeAttr("disabled");
            $("#" + imageId).hide();
            window.clearInterval(downloadTimer);
            expireCookie(cookieName);
        }

        downloadTimerAttempts--;
    }, 1000);
}

// form submit event
$("#btnSubmit").click(function () {
    $(this).attr("disabled", "disabled");  // disable form submit button
    $("#imgLoading").show();  // show loading animation
    startDownloadChecker("btnSubmit", "imgLoading", 120);
});

<form method="post">
    ...fields...
    <button id="btnSubmit">Submit</button>
    <img id="imgLoading" src="spinner.gif" style="display:none" />
</form>

支持 Javascript 设置/获取/删除 cookie：

function setCookie(name, value, expiresInSeconds) {
    var exdate = new Date();
    exdate.setTime(exdate.getTime() + expiresInSeconds * 1000);
    var c_value = escape(value) + ((expiresInSeconds == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = name + "=" + c_value + '; path=/';
};
function getCookie(name) {
    var parts = document.cookie.split(name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
}
function expireCookie(name) {
    document.cookie = encodeURIComponent(name) + "=; path=/; expires=" + new Date(0).toUTCString();
}

ASP.Net 中的服务器端代码：

...generate big document...

// attach expired cookie to response to signal download is complete
var cookie = new HttpCookie("DownloadCompleteChecker");  // same cookie name as above!
cookie.Expires = DateTime.Now.AddDays(-1d);  // expires yesterday
HttpContext.Current.Response.Cookies.Add(cookie); // Add cookie to response headers
HttpContext.Current.Response.Flush();  // send response

希望对您有所帮助！ :)

【讨论】：

代码效果很好。就我而言，我发现了一个错误。我有一个提交表单的按钮。没有页面刷新。在连续下载时，javascript 代码最终会自动使 cookie 过期。所以一旦cookie第一次过期，我重置DownloadTimeAttempts变量，然后它每次都有效。
@Bmoe 感谢您的建议。我已经对其进行了修改，以便 timeout 现在是 startDownloadChecker 的参数，并且在每次调用该方法时都被设置。这使其更加灵活，并允许连续下载。

【解决方案4】：

我发现jcubic 的答案非常适合我的需求。

我正在生成一个 CSV（纯文本），所以不需要额外的二进制库。

如果您也需要这样做，以下是我将其调整为适用于纯文本文件的方法。

$('.download').on('click', function() {
    // show the loading indicator
    $('.indicator').show();

    // get the filename
    var fname = $(this).attr('data-download');

    $.get("/products/export", function(file) {
        var dataURI = 'data:text/csv;charset=utf-8,' + file;
        $('<a>' + fname + '</a>').attr({
            download: fname,
            href: dataURI
        })[0].click();

        // hide the loading indicator
        $('.indicator').hide();
    });
});

文件名由.download 类标签上的 HTML 中的 data-download 属性指定。

【讨论】：