Ajax下载大数据pdf文件

Question

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

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

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

- -更新 - - -

示例控制器如下所示：

public ActionResult DownloadFile()

    {

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

    }

- -更新 - - -

这是示例项目。

Answer 1

在 CSS 下面添加<style>#overlay {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; display: none;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; background-color: rgba(0,0,0,0.5);&nbsp; &nbsp; z-index: 99;&nbsp; &nbsp; cursor: pointer;}</style>在表单标签中&nbsp;<button class="btn btn-default btn-lg" onclick="ConfirmDialog('Are you sure you want To Download?')">Download</button><br /><br /><div id="overlay">&nbsp; &nbsp; <div id="text">&nbsp; &nbsp; &nbsp; &nbsp; <img src="~/assets/images/loadingimage.gif" style="width:5%;" /><span> &nbsp; Downloading....</span>&nbsp; &nbsp; </div></div><label class="error-msg" style="color:green;" itemid="lblmsg"></label>脚本标签<script type="text/javascript">&nbsp; &nbsp; function ConfirmDialog(message) {&nbsp; &nbsp; &nbsp; &nbsp; debugger;&nbsp; &nbsp; &nbsp; &nbsp; var x = window.confirm(message)&nbsp; &nbsp; &nbsp; &nbsp; debugger;&nbsp; &nbsp; &nbsp; &nbsp; if (x) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; on();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '@Url.Action("YourMVC_Method", "Controller")',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'GET',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: 'application/json;charset=utf-8',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; debugger;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("label[itemid='lblmsg']").show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('label[itemid="lblmsg"]').text('DownloadSuccess');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; off();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (ex) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //alert(ex);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('label[itemid="lblmsg"]').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; off();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('label[itemid="lblmsg"]').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; off();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function on() {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("overlay").style.display = "block";&nbsp; &nbsp; }&nbsp; &nbsp; function off() {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("overlay").style.display = "none";&nbsp; &nbsp; }</script>

Answer 2

您可以使用URL.createObjectURL获取下载blob对象的临时 url，然后只需使用带有download属性的链接。<div id="spinner" style="display: none;">Loading...</div><button onclick="downloadPDF()">Download</button>function downloadPDF () {&nbsp; const spinner = document.getElementById("spinner")&nbsp; spinner.style.display = "block"&nbsp; fetch('YOUR_URL_HERE')&nbsp; &nbsp; .then(resp => resp.blob())&nbsp; &nbsp; .then(blob => {&nbsp; &nbsp; &nbsp; const href = URL.createObjectURL(blob)&nbsp; &nbsp; &nbsp; const link = document.createElement('a')&nbsp; &nbsp; &nbsp; link.href = href;&nbsp; &nbsp; &nbsp; link.download = "filename.pdf"&nbsp; &nbsp; &nbsp; link.click()&nbsp; &nbsp; &nbsp; spinner.style.display = "none"&nbsp; &nbsp; })}

Answer 3

您可以使用 Ajax 请求来实现这一点。步骤 1 创建 ajax 调用以创建 pdf 文件步骤 2 返回保存的 pdf 文件路径并设置 window.location 以下载 pdf在第 1 步——您可以使用以下方法显示微调器：jQuery – AJAX 加载效果：使用 AJAX 请求显示内容的简单方法例子：&nbsp; &nbsp;<body onload="loadingAjax('myDiv');">&nbsp; &nbsp; <div id="myDiv">&nbsp; &nbsp; &nbsp; &nbsp; <img id="loading-image" src="ajax-loader.gif" style="display:none;"/>&nbsp; &nbsp; </div></body>和脚本 -<script>function loadingAjax(div_id) {&nbsp; &nbsp; &nbsp; var divIdHtml = $("#"+div_id).html();&nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;url: "controller/method", //URL which generate pdf&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: "data here",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;beforeSend: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#loading-image").show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;success: function(msg) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#loading-image").hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location= msg.FilePath;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; });}</script>&nbsp;