Question

我正在按下按钮，在服务器上下载我创建的文件，如下面的代码所示。

$(document).ready(function() {
  $('#reportBtn').on('click', function() {
    $('#loadingScreen').removeClass('hidden');
    window.location = '/myApp/Home/GenerateReport';
    setTimeout(function() {
      $('#loadingScreen').addClass('hidden');
    }, 20000);
  });
});

它工作正常，我知道理想情况下这应该包含在一个AJAX调用中并返回一个唯一的GUID并以这种方式返回文件 - 但是我不能使用这种方法而我只是想知道是否有更好的方法我应该文件下载后检测到，所以我可以更好地删除加载gif。我已经硬编码了20秒，我知道这是非常正确的 - 有时取决于它在10秒内下载的报告中的数据量，或者下载可能需要30秒。

有没有更好的方法我可以使用保持对window.location的基本调用相同 - 请注意这是一个MVC调用，它返回return File(data, MediaTypeNames.Application.Octet, reportName);

的FileResult

Answer 1

除此之外，您可以尝试使用另一种方法来显示加载微调器，即在页面加载期间：

<script type="text/javascript">  
    $(function () {
        $("#btnSubmit").click(function () {  
            var form = $("#frmCreate");
            form.validate();

            if (form.valid()) {  
                $("#loading").fadeIn();
                var opts = {
                    lines: 12, // The number of lines to draw
                    length: 7, // The length of each line
                    width: 4, // The line thickness
                    radius: 10, // The radius of the inner circle
                    color: '#000', // #rgb or #rrggbb
                    speed: 1, // Rounds per second
                    trail: 60, // Afterglow percentage
                    shadow: false, // Whether to render a shadow
                    hwaccel: false // Whether to use hardware acceleration
                };
                var target = document.getElementById('loading');
                var spinner = new Spinner(opts).spin(target);
            }
        });  
    });
</script>


<div id="loading">
    <div id="loadingcontent">
        <p id="loadingspinner">
            Loading...
        </p>
    </div>
</div>   


<style>
    #loading {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }

    #loadingcontent {
        display: table;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #loadingspinner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        text-align: center;
        font-size: larger;
        padding-top: 80px;
    }
</style>

同样，您也可以使用一些插件来显示加载微调器。希望这会有所帮助...

window.location返回后删除加载gif

1 个答案: