jQuery PDF 下载 - 请等待和成功消息答案

【问题标题】：jQuery PDF Download - Please Wait and Success messagesjQuery PDF 下载 - 请等待和成功消息
【发布时间】：2017-04-21 14:30:18
【问题描述】：

我有一个 PHP 脚本，它接受 $_POST 变量来触发 PDF 文件下载，并且该脚本已设置为将文件作为下载返回，而不是在浏览器中加载文件或将文件保存到服务器.

我可以用一个简单的表单下载这个文件，完全没有问题，但是由于处理时间大约为 5 到 10 秒，我决定尝试让 jQuery 处理 click 事件，以便我可以显示处理脚本时出现“请稍候”消息，处理完成时出现“文件下载已开始”消息，事实证明这比我希望的要困难得多。

我可以让click 显示“请稍候”消息，但无法识别页面何时完成处理，因此即使在下载 PDF 后，“请稍候”消息仍然存在。

如果我使用 jQuery 处理 click 事件和 POST 处理 ajax 的数据，使用 preventDefault，我会收到正确的“等待”和“下载开始”消息，但无法返回文件下载到浏览器。

我通过不使用preventDefault 暂时合并了这两种方法，这对用户来说正是我想要的行为：它显示“请稍候”直到文件下载开始，然后显示“文件下载已开始”当文件实际上开始下载。但是，我确信很明显，这实际上是两次发布数据：一次使用form，另一次使用jQuery，因为它们花费相同的时间来完成请求，所以我想要的功能是达到。

有没有办法正确地实现我想要的？

HTML 表单（$filename 来自数据库调用）

<form method="post" action="pdf/index.php" name="pdfForm" id="pdfForm">
<button type="submit" class="downloadButton" 
name="filename" value="'.$filename.'">'.$filename.'</button>
</form>

"Working" jQuery（我尝试过的其他版本有一些冗余，抱歉）

<script>
  $(document).ready(function() {
    $('.downloadButton').on('click', function(e) {
      //e.preventDefault();  // File will not download if this is not commented out
      var $filename = $(this).val();
      var $thisBox = $(this);
      var $url = $('#pdfForm').attr('action');
      $thisBox.text("Please Wait");
      url = $url;
      return $.post(url, {filename: $filename})
        .done(function(data) {
          $thisBox.text("File Download has started");
          // This won't happen unless e.preventDefault() is excluded
        });

    });
  });
</script>

我已经搜索了无数其他问题，希望找到解决方案，但没有找到适合我的方法。我得到的最接近的是ajaxblob，但我需要对旧版浏览器的支持，结果无论如何都不是很好。

任何帮助将不胜感激，希望我只是遗漏了一些明显的东西，现在看了这么久都看不到它。

【问题讨论】：

标签： jquery ajax pdf post download

【解决方案1】：

我遇到了同样的问题，我找到了解决方案。也许你应该修改为 pdf，也许不是。

//When click...
//For browers doesn't support the download attribut.... 
//The only issue is to past by a popup with the GET method
a = document.createElement('a');
if(typeof a.download =="undefined") {
    win = window.open('your_url?data=data','_blank','height=200,width=200,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
    var loop = setInterval(function() {   
        if(win.closed) {  
            clearInterval(loop);  
            //Hide your modal or clean your innerhtml here
        }  
    }, 1000); 
    return(false);
}else{
    // Use XMLHttpRequest
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        var a;
        if (xhttp.readyState === 4 && xhttp.status === 200) {
            a.href = window.URL.createObjectURL(xhttp.response);
            a.download = "name_file";
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
        }
    };
    xhttp.open("POST", 'your_url');
    xhttp.setRequestHeader("Connection", "close");
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // For a word I must return a 'blob' because it's a binary. Maybe you should change it
    xhttp.responseType = 'blob';
    xhttp.send(JSON.stringify(your_data));
    xhttp.addEventListener('readystatechange', function() {
        if (xhttp.readyState === XMLHttpRequest.DONE) { 
            //Hide your modal, or clean your innerhtml here
        }
    });
}

【讨论】：