检测浏览器何时接收到文件下载

我在这个问题上有一个真正的斗争，但我发现了一个使用iframes的可行解决方案。这很糟糕，但它适用于我遇到的一个简单问题。)

我有一个HTML页面，它启动了一个单独的PHP脚本，生成文件，然后下载它。在HTML页面上，我在HTML标题中使用了以下jQuery代码(你也需要包括一个jQuery库):

<script>
$(function(){
var iframe = $("<iframe>", {name: 'iframe', id: 'iframe',}).appendTo("body").hide();
$('#click').on('click', function(){
$('#iframe').attr('src', 'your_download_script.php');
});
$('iframe').load(function(){
$('#iframe').attr('src', 'your_download_script.php?download=yes'); <!-- On first iframe load, run script again but download file instead -->
$('#iframe').unbind(); <!-- Unbinds the iframe. Helps prevent against infinite recursion if the script returns valid html (such as echoing out exceptions) -->
});
});
</script>

在文件your_download_script.php中，有以下内容:

function downloadFile($file_path) {
if (file_exists($file_path)) {
header('Content-Description: File Transfer');
header('Content-Type: text/csv');
header('Content-Disposition: attachment; filename=' . basename($file_path));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file_path));
ob_clean();
flush();
readfile($file_path);
exit();
}
}


$_SESSION['your_file'] = path_to_file; // This is just how I chose to store the filepath


if (isset($_REQUEST['download']) && $_REQUEST['download'] == 'yes') {
downloadFile($_SESSION['your_file']);
} else {
// Execute logic to create the file
}

为了解决这个问题，jQuery首先在iframe中启动PHP脚本。一旦文件生成，iframe就会被加载。然后jQuery使用请求变量再次启动脚本，告诉脚本下载文件。

不能一次性完成下载和文件生成的原因是php header()函数。如果你使用header()，你正在将脚本更改为网页以外的内容，jQuery将永远不会将下载脚本识别为“已加载”。我知道这可能并不一定是检测浏览器何时接收文件，但您的问题听起来与我的类似。

我编写了一个简单的JavaScript类，实现了类似于bulltorious的回答中描述的技术。我希望它能对在座的人有用。

GitHub项目名为response-monitor.js。

默认情况下，它使用spin.js作为等待指示器，但它也提供了一组用于实现自定义指示器的回调。

jQuery是支持的，但不是必需的。

显著的特征

• 简单的集成
• 没有依赖关系
• jQuery插件(可选)
• js集成(可选)
• 用于监视事件的可配置回调
• 同时处理多个请求
• 服务器端错误检测
• 超时检测
• 跨浏览器

示例使用

超文本标记语言

<!-- The response monitor implementation -->
<script src="response-monitor.js"></script>


<!-- Optional jQuery plug-in -->
<script src="response-monitor.jquery.js"></script>


<a class="my_anchors" href="/report?criteria1=a&criteria2=b#30">Link 1 (Timeout: 30s)</a>
<a class="my_anchors" href="/report?criteria1=b&criteria2=d#10">Link 2 (Timeout: 10s)</a>


<form id="my_form" method="POST">
<input type="text" name="criteria1">
<input type="text" name="criteria2">
<input type="submit" value="Download Report">
</form>

客户端(纯JavaScript)

// Registering multiple anchors at once
var my_anchors = document.getElementsByClassName('my_anchors');
ResponseMonitor.register(my_anchors); // Clicking on the links initiates monitoring


// Registering a single form
var my_form = document.getElementById('my_form');
ResponseMonitor.register(my_form); // The submit event will be intercepted and monitored

客户端(jQuery)

$('.my_anchors').ResponseMonitor();
$('#my_form').ResponseMonitor({timeout: 20});

带有回调函数的客户端

// When options are defined, the default spin.js integration is bypassed
var options = {
onRequest: function(token) {
$('#cookie').html(token);
$('#outcome').html('');
$('#duration').html('');
},
onMonitor: function(countdown) {
$('#duration').html(countdown);
},
onResponse: function(status) {
$('#outcome').html(status==1 ? 'success' : 'failure');
},
onTimeout: function() {
$('#outcome').html('timeout');
}
};


// Monitor all anchors in the document
$('a').ResponseMonitor(options);

服务器(PHP)

$cookiePrefix = 'response-monitor'; // Must match the one set on the client options
$tokenValue = $_GET[$cookiePrefix];
$cookieName = $cookiePrefix.'_'.$tokenValue; // Example: response-monitor_1419642741528


// This value is passed to the client through the ResponseMonitor.onResponse callback
$cookieValue = 1; // For example, "1" can interpret as success and "0" as failure


setcookie(
$cookieName,
$cookieValue,
time() + 300,          // Expire in 5 minutes
"/",
$_SERVER["HTTP_HOST"],
true,
false
);


header('Content-Type: text/plain');
header("Content-Disposition: attachment; filename=\"Response.txt\"");


sleep(5); // Simulate whatever delays the response
print_r($_REQUEST); // Dump the request in the text file

有关更多示例，请检查存储库中的示例文件夹。

如果您正在流式处理动态生成的文件，并且还实现了实时的服务器到客户端消息库，那么您可以非常容易地提醒客户端。

我喜欢并推荐的服务器到客户端消息传递库是Socket。io(通过Node.js)。服务器脚本生成供下载的流文件后，脚本中的最后一行可以向Socket发出消息。IO，它向客户端发送通知。在客户端，Socket。IO监听从服务器发出的传入消息，并允许您对它们进行操作。与其他方法相比，使用此方法的好处是，您能够在流处理完成后检测“真正的”完成事件。

例如，您可以在单击下载链接后显示繁忙指示器，流式传输文件，向Socket发出消息。在您的流脚本的最后一行中，从服务器中输入io，在客户端侦听通知，接收通知并通过隐藏busy指示器更新您的UI。

我知道大多数读到这个问题答案的人可能没有这种类型的设置，但我已经在我自己的项目中使用了这种确切的解决方案，而且效果非常好。

套接字。IO非常容易安装和使用。更多信息:http://socket.io/

如果您只想在显示下载对话框之前显示消息或加载器GIF图像，那么一个快速的解决方案是将消息放在一个隐藏的容器中，当您单击生成要下载的文件的按钮时，您将使容器可见。

然后使用jQuery或JavaScript捕获按钮的focusout事件来隐藏包含消息的容器。

如果带blob的XMLHttpRequest不是一个选项，那么你可以在一个新窗口中打开你的文件，并检查是否有任何元素在该窗口体中以间隔填充。

var form = document.getElementById("frmDownlaod");
form.setAttribute("action", "downoad/url");
form.setAttribute("target", "downlaod");
var exportwindow = window.open("", "downlaod", "width=800,height=600,resizable=yes");
form.submit();


var responseInterval = setInterval(function() {
var winBody = exportwindow.document.body
if(winBody.hasChildNodes()) // Or 'downoad/url' === exportwindow.document.location.href
{
clearInterval(responseInterval);
// Do your work.
// If there is an error page configured in your application
// for failed requests, check for those DOM elements.
}
}, 1000)
// Better if you specify the maximum number of intervals

我在这个配置中遇到了同样的问题:

• # EYZ0 1.2.9
• # EYZ0 1.3.2。
• # EYZ0 1.7.1.custom
• Internet Explorer 11 .
• Java 5

我用饼干的解决方案:

客户端:

在提交表单时，调用JavaScript函数隐藏页面并加载等待的旋转器

function loadWaitingSpinner() {
... hide your page and show your spinner ...
}

然后，调用一个函数，每500毫秒检查一次cookie是否来自服务器。

function checkCookie() {
var verif = setInterval(isWaitingCookie, 500, verif);
}

如果找到cookie，停止每500毫秒检查一次，使cookie过期，并调用函数返回页面并删除等待的旋转器(removeWaitingSpinner ())。如果您希望能够再次下载另一个文件，过期cookie是很重要的!

function isWaitingCookie(verif) {
var loadState = getCookie("waitingCookie");
if (loadState == "done") {
clearInterval(verif);
document.cookie = "attenteCookie=done; expires=Tue, 31 Dec 1985 21:00:00 UTC;";
removeWaitingSpinner();
}
}


function getCookie(cookieName) {
var name = cookieName + "=";
var cookies = document.cookie
var cs = cookies.split(';');
for (var i = 0; i < cs.length; i++) {
var c = cs[i];
while(c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}


function removeWaitingSpinner() {
... come back to your page and remove your spinner ...
}

服务器端:

在服务器进程结束时，向响应添加一个cookie。当您的文件准备好下载时，cookie将被发送到客户端。

Cookie waitCookie = new Cookie("waitingCookie", "done");
response.addCookie(waitCookie);

根据我的经验，有两种方法可以解决这个问题:

1. 在下载时设置一个短期cookie，并让JavaScript不断检查它的存在。唯一真正的问题是让cookie的生命周期正确-太短，JavaScript可能会错过它，太长，它可能会取消其他下载的下载屏幕。使用JavaScript在发现cookie时删除cookie通常可以解决这个问题。
2. 使用fetch/XHR下载文件。您不仅确切地知道文件下载何时完成，如果您使用XHR，您还可以使用进度事件来显示进度条!保存结果blob与msSaveBlob在Internet Explorer或边缘和下载链接(比如这个)在Firefox和Chrome。这个方法的问题是iOS Safari似乎不能正确地处理下载blob -你可以用FileReader将blob转换为数据URL并在一个新窗口中打开它，但这是打开文件，而不是保存它。

这个Java/春天示例检测下载的结束，在这一点上它隐藏了&;指标。

在JavaScript方面，设置饼干，最大过期时间为2分钟，并每秒轮询cookie 过期。然后服务器端用早些时候过期时间覆盖这个cookie——服务器进程的完成。一旦在JavaScript轮询中检测到cookie过期，“加载…”;是隐藏的。

JavaScript的一面

function buttonClick() { // Suppose this is the handler for the button that starts
$("#loadingProgressOverlay").show();  // Show loading animation
startDownloadChecker("loadingProgressOverlay", 120);
// Here you launch the download URL...
window.location.href = "myapp.com/myapp/download";
}


// This JavaScript function detects the end of a download.
// It does timed polling for a non-expired Cookie, initially set on the
// client-side with a default max age of 2 min.,
// but then overridden on the server-side with an *earlier* expiration age
// (the completion of the server operation) and sent in the response.
// Either the JavaScript timer detects the expired cookie earlier than 2 min.
// (coming from the server), or the initial JavaScript-created cookie expires after 2 min.
function startDownloadChecker(imageId, timeout) {


var cookieName = "ServerProcessCompleteChecker";  // Name of the cookie which is set and later overridden on the server
var downloadTimer = 0;  // Reference to the timer object


// The cookie is initially set on the client-side with a specified default timeout age (2 min. in our application)
// It will be overridden on the server side with a new (earlier) expiration age (the completion of the server operation),
// or auto-expire after 2 min.
setCookie(cookieName, 0, timeout);


// Set a timer to check for the cookie every second
downloadTimer = window.setInterval(function () {


var cookie = getCookie(cookieName);


// If cookie expired (NOTE: this is equivalent to cookie "doesn't exist"), then clear "Loading..." and stop polling
if ((typeof cookie === 'undefined')) {
$("#" + imageId).hide();
window.clearInterval(downloadTimer);
}


}, 1000); // Every second
}


// These are helper JavaScript functions for setting and retrieving a 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();
}
}

Java/Spring服务器端

    @RequestMapping("/download")
public String download(HttpServletRequest request, HttpServletResponse response) throws Exception {
//... Some logic for downloading, returning a result ...


// Create a Cookie that will override the JavaScript-created
// Max-Age-2min Cookie with an earlier expiration (same name)
Cookie myCookie = new Cookie("ServerProcessCompleteChecker", "-1");
myCookie.setMaxAge(0); // This is immediate expiration, but can also
// add +3 seconds for any flushing concerns
myCookie.setPath("/");
response.addCookie(myCookie);
//... -- presumably the download is writing to the Output Stream...
return null;
}

PrimeFaces也使用cookie轮询。

# EYZ0:

    monitorDownload: function(start, complete, monitorKey) {
if(this.cookiesEnabled()) {
if(start) {
start();
}


var cookieName = monitorKey ? 'primefaces.download_' + monitorKey : 'primefaces.download';
window.downloadMonitor = setInterval(function() {
var downloadComplete = PrimeFaces.getCookie(cookieName);


if(downloadComplete === 'true') {
if(complete) {
complete();
}
clearInterval(window.downloadMonitor);
PrimeFaces.setCookie(cookieName, null);
}
}, 1000);
}
},

来自其他地方的有效解决方案:

/**
*  download file, show modal
*
* @param uri link
* @param name file name
*/
function downloadURI(uri, name) {
// <------------------------------------------       Do something (show loading)
fetch(uri)
.then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
// the filename you want
a.download = name;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
// <----------------------------------------  Detect here (hide loading)
alert('File detected');
})
.catch(() => alert('An error sorry'));
}

你可以使用它:

downloadURI("www.linkToFile.com", "file.name");

核心问题是web浏览器没有在页面导航被取消时触发事件，但有一个在页面完成加载时触发的事件。任何外部的直接浏览器事件都将是一个优点和缺点的黑客。

有四种已知的方法来处理检测浏览器下载何时开始:

1. 调用fetch()，检索整个响应，附加带有download属性的a标记，并触发单击事件。现代网络浏览器将为用户提供保存已经检索到的文件的选项。这种方法有几个缺点:

• 整个数据团存储在RAM中，因此如果文件很大，它将消耗同样多的RAM。对于小文件，这可能不是问题。
• 用户必须等待整个文件下载完成后才能保存。他们也不能离开页面，直到它完成。
• 未使用内置的web浏览器文件下载器。
• 除非设置了CORS报头，否则跨域获取可能会失败。

2. 使用iframe +服务器端cookie。如果页面在iframe中加载，而不是开始下载，iframe将触发load事件，但如果下载开始，它不会触发任何事件。在web服务器上设置cookie可以被JavaScript循环检测到。这种方法有几个缺点:

• 服务器和客户机必须协同工作。服务器必须设置cookie。客户端必须检测cookie。
• 跨域请求将无法设置cookie。
• 每个域可以设置多少个cookie是有限制的。
• 不能发送自定义HTTP报头。

3. 使用带有URL重定向的iframe。iframe启动一个请求，一旦服务器准备好文件，它将转储一个HTML文档，该文档执行元刷新到一个新的URL，这将在1秒后触发下载。iframe上的load事件发生在HTML文档加载时。这种方法有几个缺点:

• 服务器必须维护所下载内容的存储。需要cron作业或类似作业来定期清理目录。
• 当文件准备好时，服务器必须转储特殊的HTML内容。
• 在从DOM中删除iframe之前，客户端必须猜测iframe何时实际向服务器发出了第二个请求，以及下载实际何时开始。这可以通过将iframe留在DOM中来解决。
• 不能发送自定义HTTP报头。

4. 使用iframe + XHR。iframe触发下载请求。一旦通过iframe发出请求，就会通过XHR发出相同的请求。如果iframe上的load事件触发，则表示发生了错误，请中止XHR请求，并删除iframe。如果触发xhr# EYZ1事件，则iframe中可能已经开始下载，请中止XHR请求，等待几秒钟，然后删除iframe。这样就可以在不依赖服务器端cookie的情况下下载更大的文件。这种方法有几个缺点:

• 对于相同的信息有两个不同的请求。服务器可以通过检查传入的报头来区分XHR和iframe。
• 除非设置了歌珥报头，否则跨域XHR请求可能会失败。但是，直到服务器发送回HTTP报头，浏览器才知道CORS是否被允许。如果服务器等待发送报头，直到文件数据准备就绪，那么即使没有CORS, XHR也可以大致检测到iframe何时开始下载。
• 客户端必须猜测下载何时开始从DOM中删除iframe。这可以通过将iframe留在DOM中来解决。
• 不能在iframe上发送自定义报头。

如果没有适当的内置web浏览器事件，这里就没有任何完美的解决方案。然而，根据您的用例，上述四种方法中的一种可能比其他方法更适合。

只要可能，动态地将响应流发送到客户端，而不是先在服务器上生成所有内容，然后再发送响应。各种文件格式可以流，如CSV, JSON, XML， 邮政编码等。这真的取决于找到一个支持流媒体内容的库。当请求一开始就流化响应时，检测下载的开始并不重要，因为它几乎马上就开始了。

另一种选择是预先输出下载标题，而不是等待所有内容先生成。然后生成内容，最后开始发送到客户端。用户内置的下载程序将耐心等待数据到达。缺点是底层网络连接可能会超时等待数据开始流动(无论是在客户端还是服务器端)。

我更新了下面的参考代码添加一个正确的下载URL链接并尝试一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
padding: 0;
margin: 0;
}


svg:not(:root) {
display: block;
}


.playable-code {
background-color: #F4F7F8;
border: none;
border-left: 6px solid #558ABB;
border-width: medium medium medium 6px;
color: #4D4E53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}


.playable-canvas {
border: 1px solid #4D4E53;
border-radius: 2px;
}


.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>


<style type="text/css">
.event-log {
width: 25rem;
height: 4rem;
border: 1px solid black;
margin: .5rem;
padding: .2rem;
}


input {
width: 11rem;
margin: .5rem;
}


</style>


<title>XMLHttpRequest: progress event - Live_example - code sample</title>
</head>


<body>
<div class="controls">
<input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
<input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
<input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
</div>


<textarea readonly class="event-log"></textarea>


<script>
const xhrButtonSuccess = document.querySelector('.xhr.success');
const xhrButtonError = document.querySelector('.xhr.error');
const xhrButtonAbort = document.querySelector('.xhr.abort');
const log = document.querySelector('.event-log');


function handleEvent(e) {
if (e.type == 'progress')
{
log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred Received ${event.loaded} of ${event.total}\n`;
}
else if (e.type == 'loadstart')
{
log.textContent = log.textContent + `${e.type}: started\n`;
}
else if  (e.type == 'error')
{
log.textContent = log.textContent + `${e.type}: error\n`;
}
else if (e.type == 'loadend')
{
log.textContent = log.textContent + `${e.type}: completed\n`;
}
}


function addListeners(xhr) {
xhr.addEventListener('loadstart', handleEvent);
xhr.addEventListener('load', handleEvent);
xhr.addEventListener('loadend', handleEvent);
xhr.addEventListener('progress', handleEvent);
xhr.addEventListener('error', handleEvent);
xhr.addEventListener('abort', handleEvent);
}


function runXHR(url) {
log.textContent = '';


const xhr = new XMLHttpRequest();


var request = new XMLHttpRequest();
addListeners(request);
request.open('GET', url, true);
request.responseType = 'blob';
request.onload = function (e) {
var data = request.response;
var blobUrl = window.URL.createObjectURL(data);
var downloadLink = document.createElement('a');
downloadLink.href = blobUrl;
downloadLink.download = 'download.zip';
downloadLink.click();
};
request.send();
return request
}


xhrButtonSuccess.addEventListener('click', () => {
runXHR('https://abbbbbc.com/download.zip');
});


xhrButtonError.addEventListener('click', () => {
runXHR('http://i-dont-exist');
});


xhrButtonAbort.addEventListener('click', () => {
runXHR('https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json').abort();
});
</script>


</body>
</html>


Return to post

参考:# EYZ0

您可以依赖浏览器的缓存，并在文件加载到缓存时触发同一文件的第二次下载。

$('#link').click(function(e) {
e.preventDefault();


var url = $(this).attr('href');
var request = new XMLHttpRequest();
request.responseType = "blob";
request.open("GET", url);


var self = this;
request.onreadystatechange = function () {
if (request.readyState === 4) {
var file = $(self).data('file');
var anchor = document.createElement('a');
anchor.download = file;
console.log(file);
console.log(request);
anchor.href = window.URL.createObjectURL(request.response);
anchor.click();
console.log('Completed. Download window popped up.');
}
};
request.send();
});