添加到CSS下方

Question

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

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

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

---更新------

示例控制器如下：

public ActionResult DownloadFile()
    {


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

    }

---更新------

Here是示例项目。

Answer 1

您可以使用Ajax请求实现此目标。

第1步创建ajax调用以创建pdf文件
第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

Answer 2

添加到CSS下方

Google Trends API

在表单标签中

Google Trends API

脚本标签

<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>

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

Ajax下载具有大数据的pdf文件

3 个答案:

添加到CSS下方

在表单标签中

脚本标签