javascript - ajax下载大数据的pdf文件

Question

我正在尝试从服务器下载大型 pdf 文件，但服务器需要一些时间来生成 pdf 并做出响应，因此请求显示为待处理。

我需要在请求开始时显示微调器并在请求完成时隐藏它。

我如何使用 JavaScript ASP.NET MVC 完成此操作。

---更新------

示例 Controller 如下所示:

public ActionResult DownloadFile()
    {


        return File(@"C:\Temp2\HolidayInnReceipt.pdf", "application/pdf", "Report.pdf");

    }

---更新------

Here是示例项目。

Answer 1

在CSS下方添加

<style>
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 99;
    cursor: pointer;
}</style>

在表单标签中

 <button class="btn btn-default btn-lg" onclick="ConfirmDialog('Are you sure you want To Download?')">Download</button>
<br /><br />
<div id="overlay">
    <div id="text">
        <img src="~/assets/images/loadingimage.gif" style="width:5%;" /><span> &nbsp; Downloading....</span>
    </div>
</div>
<label class="error-msg" style="color:green;" itemid="lblmsg"></label>

脚本标签

<script type="text/javascript">
    function ConfirmDialog(message) {
        debugger;

        var x = window.confirm(message)
        debugger;
        if (x) {
            on();               
            $.ajax({
                url: '@Url.Action("YourMVC_Method", "Controller")',
                type: 'GET',
                contentType: 'application/json;charset=utf-8',
                success: function (result) {
                    debugger;
                    $("label[itemid='lblmsg']").show();
                    $('label[itemid="lblmsg"]').text('DownloadSuccess');
                    off();
                },
                error: function (ex) {
                    //alert(ex);
                    $('label[itemid="lblmsg"]').hide();
                    off();
                }
            });
        }
        else {
            $('label[itemid="lblmsg"]').hide();
            off();
        }
    }
    function on() {
        document.getElementById("overlay").style.display = "block";
    }

    function off() {
        document.getElementById("overlay").style.display = "none";
    }
</script>