jQuery PDF Download - Please Wait and Success消息

我有一個PHP腳本，它接受一個$_POST變量來觸發PDF文件的下載，並且該腳本已設置爲將文件作爲下載返回而不是在瀏覽器中加載文件或將文件保存到服務器。jQuery PDF Download - Please Wait and Success消息

我可以得到這個文件下載一個簡單的形式，根本沒有問題，但是因爲有大約5到10秒的處理時間，我決定嘗試讓jQuery處理click事件，以便我可以顯示一個當處理完腳本後處理腳本和「文件下載已經開始」消息中顯示「請稍候」消息，事實證明，這是我希望的難度。

我可以讓click顯示「請稍候」消息，但無法識別頁面何時完成處理，因此即使下載了PDF，「請稍候」消息仍然存在。

如果我使用jQuery與ajax處理click事件和POST數據，使用preventDefault，我得到正確的「等待」和「下載已啓動」的消息，但該文件的下載不能返回給瀏覽器。

我暫時併入了兩種方法，不使用preventDefault，這對用戶來說就是我想要的確切行爲：它顯示「Please Wait」，直到文件下載開始，然後「文件下載已經開始」實際上開始下載。但是，我確定這很明顯，這實際上是發佈了兩次數據：一次使用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>

「工作」的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，但我需要支持較老的瀏覽器，結果也不是很好。

任何幫助將不勝感激，希望我只是失去了明顯的東西，現在看不到它已經看了這麼久。

來源

2017-04-21 JoeP

我對一個單詞有同樣的問題，我找到了解決方案。也許你應該修改一個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 
     } 
    }); 
}

來源

2017-04-21 16:06:27 HRoux

jQuery PDF Download - Please Wait and Success消息

回答

相關問題