Question

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

我可以用一个简单的表单下载这个文件，没有任何问题，但是因为大约有5到10秒的处理时间我决定尝试让jQuery处理click事件，这样我就可以了可以显示一个＆＃34; Please Wait＆＃34;处理脚本并开始＆＃34;文件下载时消息＃34;处理完成时的消息，事实证明这是我所希望的更加困难。

我可以让click显示＆＃34; Please Wait＆＃34;消息，但然后无法识别页面何时完成处理，因此＆＃34;请等待＆＃34;即使在下载PDF后，该消息仍然存在。

如果我使用jQuery来处理click事件，并使用POST使用ajax来preventDefault数据，我会得到正确的＆＃34;等待＆＃34;和＆＃34;下载已开始＆＃34;消息，但无法将文件下载返回到浏览器。

我通过不使用preventDefault临时合并了这两种方法，这对用户来说就是我想要的确切行为：它显示了＆＃34; Please Wait＆＃34;直到文件下载开始然后＆＃34;文件下载已开始＆＃34;当文件实际开始下载时。但是，我确信很明显，这实际上是两次发布数据：一次使用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>

＆＃34;工作＆＃34; 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>

我已经搜索了无数其他希望找到解决方案的问题，但发现没有什么对我有用。我得到的最接近的是ajax blob，但我需要支持较旧的浏览器，结果并不是很好。

任何帮助都会非常感激，希望我只是遗漏了一些显而易见的东西，现在看不到它已经看了很久了。

Answer 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
        }
    });
}

jQuery PDF下载 - 请稍候和成功消息

1 个答案: