如何在下载文件时显示和删除加载.gif文件?
我有一个按钮,当点击时,需要通过使用POST提交表单来下载文件。 [ 编辑澄清:正在下载的文件是通过基于隐藏表单中的值的PHP脚本动态生成的(我通过jQuery更改,具体取决于单击的按钮)。 有问题的文件是Excel文件。 如果可能,我宁愿不使用GET,因为我不希望人们直接链接到该文件。]
我无法使用$.post
提交表单,因为这不符合我的意愿。 虽然提交正常,但它不会触发浏览器中的下载对话框。 据我了解,该文件的内容现在存在于JavaScript中,并且没有办法(我知道)允许您从JavaScript发送到浏览器进行下载。 那么,其他解决方案(例如, 如何在提交表单后使用jQuery或Ajax交换背景图像? )在这种特殊情况下不起作用。
我找到的解决方案是使用$("#someform").submit();
单击按钮时触发隐藏的表单。 页面不会重新加载,屏幕上会弹出保存对话框。
示例代码:
$( "#button" ).click( function() { $(this).removeClass( "button" ); $(this).addClass( "loading" ); $( "#form" ).submit(); } );
但是,由于生成文件可能需要几秒钟,因此我想向用户显示加载动画gif。 这现在提出了我可以显示动画的问题,但是在提交表单后我无法删除动画。
如果使用这种方法无法完成,有人可以建议更好的解决方案吗?
您应该提供.gif的URL或将其编码为Base64的流
当您submit
表单时,整个页面将刷新,除非您没有在页面加载的其他位置添加它,否则肯定会删除加载图像。
我在这个问题中发布了一个答案,演示了如何做到这一点。 请参阅http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php上的演示以及http://tomsfreelance.com/stackoverflow/imageDownloadLoading/上的源文件
我在2个Librairies下完成了MIT许可:BinaryTransport和FileSaver 。 在这个例子中,我正在下载生成服务器端的Excel文件。
HTML(头标记):
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"); } }); }
对于自定义加载动画,只需在我更改这些行的游标类型的地方调用它:
$("body").css("cursor", "progress"); $("body").css("cursor", "default");