6

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.

Improve this question

3 Answers 3

Reset to default
1

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> &nbsp; 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>
Improve this answer
3
  • It says file downloaded but no save as dialog opens in Chrome and I don't see file anywhere.
    – Farukh
    Commented Sep 13, 2018 at 7:37
  • Simply Its Renaming all name actual code is import database Right!! You can only take on and off overlay method and ajax file for reference from my above code!! And Set Your PDFs Download code!! It will working fine for u.. Thanks
    – Aftab Lala
    Commented Sep 13, 2018 at 7:41
  • In success: function (result) - result has the PDF file, how do I invoke browser default behavior?
    – Farukh
    Commented Sep 13, 2018 at 17:48
0

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

Improve this answer
2
  • If you are returning json result which has property FilePath set with pdf file path
    – Niranjan Singh
    Commented Sep 13, 2018 at 9:31
  • I am not returning JSON I am retiring FileResult which has inside file stream.
    – Farukh
    Commented Sep 13, 2018 at 17:43
0

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"
    })
}
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.