Question

我有一个按钮，当点击时，需要通过使用POST提交表单来下载文件。 [编辑以澄清：正在下载的文件是通过基于隐藏表单中的值的PHP脚本动态生成的（我通过jQuery更改，具体取决于单击的按钮）。有问题的文件是Excel文件。如果可能的话，我宁愿不使用GET，因为我不希望人们直接链接到该文件。]

我无法使用$.post提交表单，因为这不符合我的要求。虽然提交正常，但它不会触发浏览器中的下载对话框。据我了解，该文件的内容现在存在于JavaScript中，并且没有办法（我知道）允许您从JavaScript发送到浏览器进行下载。因此，其他解决方案（例如How do I use jQuery or Ajax to swap the background image after a form is submitted?）在这种特殊情况下不起作用。

解决方案I found是在点击按钮时使用$("#someform").submit();触发隐藏表单。页面不会重新加载，屏幕上会弹出保存对话框。

示例代码：

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

但是，由于生成文件可能需要几秒钟，因此我想向用户显示加载动画gif。现在这会出现我可以显示动画的问题，但是在提交表单后我无法删除动画。

如果使用此方法无法完成，是否有人可以提出更好的解决方案？

Answer 1

您应该提供.gif的URL或将其编码为Base64

的流

Answer 2

当您submit整个页面要刷新的表单时，除非您没有在页面加载的其他位置添加它，否则肯定会删除加载图像。

Answer 3

我在this question中发布了一个答案，演示了如何执行此操作。请参阅http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php上的演示和http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

上的源文件

Answer 4

我已经在麻省理工学院许可下使用了2个图书馆：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");

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

4 个答案: