I am trying to download large pdf file from server and server takes some time to generate pdf and respond so request showing as pending.
I need to show spinner when request starts and hide it when request is completed.
How can I accomplish this using JavaScript ASP.NET MVC.
---UPDATE------
Example controller looks like this:
public ActionResult DownloadFile() { return File(@"C:\Temp2\HolidayInnReceipt.pdf", "application/pdf", "Report.pdf"); } ---UPDATE------
Here is sample project.
3 Answers
Answers 1
You can implement this using the Ajax request..
Step 1 Create ajax call to create pdf file
Step 2 Return saved pdf file path and set the window.location to download the pdf
At Step 1 -- you can show the spinner using the below approach:
jQuery – AJAX Loading Effect: A Simple Way to Display Content Using AJAX Request
Example:
<body onload="loadingAjax('myDiv');"> <div id="myDiv"> <img id="loading-image" src="ajax-loader.gif" style="display:none;"/> </div> </body> and the script -
<script> function loadingAjax(div_id) { var divIdHtml = $("#"+div_id).html(); $.ajax({ type: "POST", url: "controller/method", //URL which generate pdf data: "data here", beforeSend: function() { $("#loading-image").show(); }, success: function(msg) { $("#loading-image").hide(); window.location= msg.FilePath; } }); } </script> References:
Display Ajax loader before load data
Answers 2
Add Below CSS
<style> #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; cursor: pointer; }</style> In Form Tag
<button class="btn btn-default btn-lg" onclick="ConfirmDialog('Are you sure you want To Download?')">Download</button> <br /><br /> <div id="overlay"> <div id="text"> <img src="~/assets/images/loadingimage.gif" style="width:5%;" /><span> Downloading....</span> </div> </div> <label class="error-msg" style="color:green;" itemid="lblmsg"></label> Script Tag
<script type="text/javascript"> function ConfirmDialog(message) { debugger; var x = window.confirm(message) debugger; if (x) { on(); $.ajax({ url: '@Url.Action("YourMVC_Method", "Controller")', type: 'GET', contentType: 'application/json;charset=utf-8', success: function (result) { debugger; $("label[itemid='lblmsg']").show(); $('label[itemid="lblmsg"]').text('DownloadSuccess'); off(); }, error: function (ex) { //alert(ex); $('label[itemid="lblmsg"]').hide(); off(); } }); } else { $('label[itemid="lblmsg"]').hide(); off(); } } function on() { document.getElementById("overlay").style.display = "block"; } function off() { document.getElementById("overlay").style.display = "none"; } </script> Answers 3
You can use URL.createObjectURL to get temporary url for downloaded blob object then just use link with download attribute.
<div id="spinner" style="display: none;">Loading...</div> <button onclick="downloadPDF()">Download</button> function downloadPDF () { const spinner = document.getElementById("spinner") spinner.style.display = "block" fetch('YOUR_URL_HERE') .then(resp => resp.blob()) .then(blob => { const href = URL.createObjectURL(blob) const link = document.createElement('a') link.href = href; link.download = "filename.pdf" link.click() spinner.style.display = "none" }) .catch(() => spinner.style.display = "none") } 
0 comments:
Post a Comment