如何在生成下载文件时显示加载动画
How to display a loading animation while file is generated for download?
我有一个web应用程序,用户可以在其中生成PDF和PowerPoint文件。这些文件可能需要一些时间来生成,所以我希望能够在生成时显示加载动画。这里的问题是,我不知道什么时候开始下载。动画永远不会消失。
我知道可以在"侧面"生成文件,并在文件准备好使用AJAX下载时提醒用户,但我更喜欢在用户等待下载开始时"锁定"用户。
要了解这里需要做什么,让我们看看这种请求通常会发生什么。
-
用户单击按钮请求文件。
-
生成该文件需要时间(用户没有得到任何反馈)。
-
文件已完成并开始发送给用户。
我们想添加的是一个反馈,让用户知道我们在做什么。。。在第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。净
Response.Cookies.Add(new HttpCookie("downloadStarted", "1") { Expires = DateTime.Now.AddSeconds(20) });
cookie的名称是downloadStarted
,其值是1
,它在NOW + 20seconds
中过期(我们每秒检查一次,所以20就足够了,如果您更改javascript中的超时值,请更改此值),它的路径在整个域上(根据您的喜好更改),它不安全,因为它不包含敏感数据,而且它不是HTTP,只是为了让我们的javascript可以看到它。
瞧!综上所述。请注意,提供的代码在我正在使用的生产应用程序上非常有效,但可能不适合您的确切需求,请根据您的喜好进行更正。
这是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中的服务器端代码。网络:
...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
希望能有所帮助!:)
您可以使用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;
});
});
}
你可以在犬科上看到下载属性支持
在你的html中放上这个:
<a href="somescript.php" class="download" data-filename="foo.pdf">generate</a>
我发现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中的数据下载属性指定的。
- 如何在生成下载文件时显示加载动画
- 如何在谷歌字体加载时显示加载图像
- 现在可以在加载addThis时显示加载吗
- 单击时选择2(未选中),显示加载微调器javascript
- 如何在网页加载时显示加载内容,并在页面完全加载时隐藏此内容
- 在弹出窗口中显示加载消息
- 使用jquery/ajax显示加载图像
- 在引导轮播加载之前显示加载微调器
- 是否可以在页面开始加载之前显示加载gif/image
- 单击链接后显示加载程序
- 等待数据时显示加载程序
- 在谷歌地图上显示加载消息
- 只想在页面上未加载初始数据时显示加载gif
- 如何在加载选项卡内容时显示加载图像
- 如何在ajax请求中显示加载微调器
- 当javascript图像转盘加载36个图像时,我可以显示加载指示器吗
- 隐藏/显示加载功能不起作用
- Jquery Chosen插件-通过Ajax动态填充列表时显示加载图标
- 有没有一种方法可以用jQuery捕获JavaScriptPageMethods调用?(显示加载屏幕)
- jquery图片库显示加载程序gif