4

I have a button that, when clicked on, needs to download a file by submitting a form using POST. [Edit to clarify: The file being downloaded is dynamically generated via a PHP script based on values within the hidden form (which I change via jQuery, depending on the button clicked). The file in question is an Excel file. I would prefer not to use GET if possible, since I don't want people to link directly to the file.]

I am unable to use $.post to submit the form because this does not work as I would like. While the submission happens fine, it doesn't trigger the download dialogue box in the browser. As I understand it, the contents of the file now exist within JavaScript, and there's no way (that I know of) that allows you to send this to the browser from JavaScript for download. So, other solutions (e.g. How do I use jQuery or Ajax to swap the background image after a form is submitted?) won't work in this particular case.

The solution I found was to use the $("#someform").submit(); to fire a hidden form when the button was clicked on. The page doesn't reload, and the save dialogue pops up on screen.

Example code:

$( "#button" ).click(
    function() {
        $(this).removeClass( "button" );
        $(this).addClass( "loading" );
        $( "#form" ).submit();  
    }
);

However, since it could take several seconds to generate the file, I wanted to display a loading animation gif to the user. This now presents the problem that I can display the animation, but I cannot remove the animation after the form has been submitted.

If it can't be done using this method, is there a better solution someone can suggest?

Community
  • 1
  • 1
Craig Sefton
  • 903
  • 11
  • 20

4 Answers4

0

I've posted an answer in this question that demonstrates how to do this. See the demo at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php and source files at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

Community
  • 1
  • 1
teynon
  • 7,540
  • 10
  • 63
  • 106
0

I've done this with 2 librairies Under MIT licence : BinaryTransport and FileSaver. In this exemple, i'm downloading an Excel file generated server side.

HTML (in head tag):

<script src="/E1/js/jquery.binarytransport.js" charset="UTF-8"></script>
<script src="/E1/js/FileSaver.js" charset="UTF-8"></script>

Javascript :

function ExportToExcel(urlExcel, fileName){
      $("body").css("cursor", "progress");
      $.ajax({
          url: urlExcel,
          type: "GET",
          dataType: 'binary',
          headers:{'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','X-Requested-With':'XMLHttpRequest'},
          processData: false,
          success: function(blob){
                $("body").css("cursor", "default");
                saveAs(blob, fileName);
          },
            error : function(result, status, error){
                $("body").css("cursor", "default");
          } 
        });  
}

For a custom loading animation, just call it where I change cursor type at these lines :

$("body").css("cursor", "progress");
$("body").css("cursor", "default");
BigPino
  • 113
  • 1
  • 10
0

You should either serve a URL to the .gif or stream it encoded as Base64

nurnachman
  • 4,468
  • 2
  • 37
  • 40
0

When you submit the form the whole page is going to refresh, the loading image will definitely be removed unless you are not adding it somewhere else on page load.

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124