logo标签列表

如何在下载文件时显示和删除加载动画(.gif)？

jqueryajax
4
我有一个按钮，当点击时需要通过提交表单使用POST方式下载文件。[编辑以澄清：下载的文件是基于隐藏表单中的值（我通过jQuery根据点击的按钮更改）动态生成的PHP脚本。所涉及的文件是Excel文件。如果可能的话，我不想使用GET，因为我不希望人们直接链接到该文件。]
我无法使用$.post提交表单，因为这样做并不能按照我的意愿工作。虽然提交很好，但它不会触发浏览器中的下载对话框。据我所知，文件的内容现在存在于JavaScript中，没有办法（我所知道的）允许您将其从JavaScript发送到浏览器以进行下载。因此，其他解决方案（例如如何在提交表单后使用jQuery或Ajax交换背景图像？）在这种特殊情况下不起作用。

我找到的解决方案是使用$("#someform").submit();来在按钮被点击时触发一个隐藏表单。页面不会重新加载，保存对话框会弹出显示。

示例代码：

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

然而，由于生成文件可能需要几秒钟的时间，我想向用户显示一个加载动画gif。现在出现的问题是，我可以显示动画，但是在提交表单后无法删除动画。
如果无法使用此方法，则有人可以建议更好的解决方案吗？
4个回答
0

我已经使用两个MIT许可下的库完成了这个任务：BinaryTransport 和 FileSaver。在这个例子中，我正在下载一个服务器端生成的Excel文件。

HTML（在头标签中）：

<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");
          } 
        });  
}

如果需要自定义加载动画，只需在我更改光标类型的这些行调用它：

$("body").css("cursor", "progress");
$("body").css("cursor", "default");
0

你应该将 .gif 文件作为 URL 服务或者以 Base64 编码的方式进行流式传输。

0
当您提交表单时，整个页面将刷新，加载图像肯定会被删除，除非您在页面加载时没有将其添加到其他位置。
实际上，如果您使用上面提供的链接中的方法进行测试，则页面不会重新加载。 - Craig Sefton
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接