链接加载后执行一些代码

这是我的问题。

我正在PHP函数中生成Excel文件（使用Zend Framework 2）。 有时，生成过程可能很长，太长（25秒+），所以我决定创build一个基于模态的结构来显示一个加载器，这样用户就不会感到困惑。

我试着用Jquery知道什么时候生成和下载了excel文件，以便我可以隐藏加载器。 该文件只需点击一个链接即可生成：

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

下面的代码生成并下载excel文件，但不允许我知道何时完成：

 $(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); }); }); 

有没有什么办法知道链接何时完成加载？ 实际上，我不知道。

Answer 1

对于你正在创build你的Excel文件的PHP文件，你将希望base64的文件，然后返回完成的文件的文件path像这样…

 <?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); ?> 

为你的JS你想要做一个AJAX获取调用，当文件被返回直接输出文件在一个标签追加到任何地方。 你也可以window.location = data但不会添加文件名。 我也试图触发一个标签的点击，但也没有触发。

 $(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); }); }); }); 

Answer 2

如果使用jQuery.ajax（）或jQuery.load（）函数加载Excel创build页面，则可分别使用“成功”或callback函数来知道该过程已完成并转到下一步。 以下是如何使用load（）函数完成的，如果你的模态有一个myModal的ID：

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