【问题标题】：Ajax download pdf file with large dataAjax下载大数据pdf文件
【发布时间】：2019-02-17 20:37:25
【问题描述】：

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

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

如何使用 JavaScript ASP.NET MVC 完成此任务。

---更新------

示例控制器如下所示：

public ActionResult DownloadFile()
    {


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

    }

---更新------

Here 是示例项目。

【问题讨论】：

标签： javascript c# asp.net-mvc

【解决方案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>

【讨论】：

它说文件已下载，但在 Chrome 中没有打开另存为对话框，我在任何地方都看不到文件。
只是它的重命名所有名称实际代码是导入数据库对！您只能从我上面的代码中获取和关闭覆盖方法和ajax文件以供参考！！并设置您的 PDF 下载代码！！它会为你工作得很好。谢谢
成功：函数（结果）-结果有PDF文件，如何调用浏览器默认行为？

【解决方案2】：

您可以使用 Ajax 请求来实现这一点。

第 1 步创建 ajax 调用以创建 pdf 文件
Step 2 返回保存的pdf文件路径并设置window.location下载pdf

在第 1 步 - 您可以使用以下方法显示微调器：
jQuery – AJAX Loading Effect: A Simple Way to Display Content Using AJAX Request

示例：

   <body onload="loadingAjax('myDiv');">
    <div id="myDiv">
        <img id="loading-image" src="ajax-loader.gif" style="display:none;"/>
    </div>
</body>

和脚本 -

<script>
function loadingAjax(div_id) {
      var divIdHtml = $("#"+div_id).html();
      $.ajax({
           type: "POST",
           url: "controller/method", //URL which generate pdf
           data: "data here",
           beforeSend: function() {
              $("#loading-image").show();
           },
           success: function(msg) {
              $("#loading-image").hide();
              window.location= msg.FilePath;
           }
      });
}
</script>

参考资料：
Display Ajax loader before load data

【讨论】：

如果您返回的 json 结果的属性 FilePath 设置为 pdf 文件路径
我没有返回 JSON 我正在停用具有内部文件流的 FileResult。

【解决方案3】：

您可以使用URL.createObjectURL 获取下载的blob 对象的临时网址，然后只需使用带有download 属性的链接。

<div id="spinner" style="display: none;">Loading...</div>
<button onclick="downloadPDF()">Download</button>

function downloadPDF () {
  const spinner = document.getElementById("spinner")

  spinner.style.display = "block"

  fetch('YOUR_URL_HERE')
    .then(resp => resp.blob())
    .then(blob => {
      const href = URL.createObjectURL(blob)
      const link = document.createElement('a')

      link.href = href;
      link.download = "filename.pdf"
      link.click()

      spinner.style.display = "none"
    })
}

【讨论】：