0

here is my issue.

I'm generating excel file in a PHP function (with Zend Framework 2). Sometimes, the generating process can be long, too long (25 seconds+), so I decided to create a modal based structure to display a loader so the user is not confused.

I'm trying, with Jquery, to know when the excel file is generated and downloaded so that I can hide the loader. The file is generated simply by clicking a link : 

<a href="linkToGenerateMyExcelFile">Download excel file</a>

The following code generates and downloads the excel file, but does not allow me to know when it's done :

$(function() {
    $(document).on('click', ".btn-export", function(event){
        event.preventDefault();
        $("#myModal-export .loader").removeClass("hide");
        var url = $('.btn-export').attr("href");
        $(location).attr("href", url);
    });
});

Is there any way to know when a link is completly loaded ? Actualy, I have no idea.

abreton
  • 1
  • 2

2 Answers2

1

For your PHP file that is creating your excel file you will want to base64 the file then return the file path of the completed file like so ...

<?php

$writer = new \PHPExcel_Writer_Excel5($workbook);


ob_start();

    $writer->save('php://output');

$xls = ob_get_contents();
ob_end_clean();

echo 'data:text/xls;base64,' . base64_encode($xls);

?>

for your JS you want to make an AJAX get call and when the file is returned direct output the file in an a tag an append it to where ever. you could also window.location = data but it doesn't add a file name. I also attempted to trigger a click on the a tag but that wasn't firing either.

$(function() {
    $(document).on('click', ".btn-export", function(event){
        event.preventDefault();

        $("#myModal-export .loader").removeClass("hide");
        var url = $(this).attr("href");

        $.get(url, function( data ) {
            $("#myModal-export .loader").addClass("hide");
            $a = $("<a>", {href: data, download: 'file_name.xls'});
            $a.text('Download');
            $('body').append($a);
        });

    });
});
cmorrissey
  • 8,493
  • 2
  • 23
  • 27
  • Thank you for the answer. It is almost completed, just one thing stay wrong. In fact, the loader is hidden at the end of the process, but the window.location line redirects me to a blank page without any downwload dialog... – abreton Feb 19 '16 at 16:42
  • @A.Breton whats that? – cmorrissey Feb 19 '16 at 16:43
  • @A.Breton then something is wrong with your PHP file, you need to post that code, and do some debugging – cmorrissey Feb 19 '16 at 16:53
  • Here is the ouput of my PHP function : $writer = new \PHPExcel_Writer_Excel5($workbook); header('Content-type: application/vnd.ms-excel'); header('Content-Disposition:inline;filename=Fichier.xls'); $writer->save('php://output'); – abreton Feb 19 '16 at 17:01
  • @A.Breton ... nope that's wrong ... remember I said `save the file to your server and then return the file path of the completed file` – cmorrissey Feb 19 '16 at 17:10
  • Thank you @cmorrissey, but is there any way to do that without saving the file on the server ? – abreton Feb 21 '16 at 00:23
  • @abreton I have updated my answer with a new solution, but it doesn't automatically download the file unless you do the `window.location` but as you will see the file name doesn't get passed through with that solution. All in all I don't know I would recommend this solution at all, the best thing to do is to save the file to your server and pass the file path back to the user. – cmorrissey Feb 22 '16 at 16:40
  • Thank you, I think it's almost done. One issue, the generated URL seems to be wrong. Because when I click on it, nothing is happening... I also tried with "data://text/xls" but it does not work too. – abreton Feb 23 '16 at 11:19
  • yeah man im not coding any more for you, you gotta figure the rest out, i have it working on my end – cmorrissey Feb 23 '16 at 20:36
0

If you load your Excel creation page with the jQuery.ajax() or jQuery.load() function, you can use the 'success' or callback function respectively to know that the process has finished and move onto the next step. Here's how to do it with the load() function if your modal has an ID of myModal:

$('#myModal').load('path-to-excel-generator.php',function() {
    // code to be executed after completion
});
DangerPowers
  • 16
  • 4