我正在尝试从服务器下载大型 pdf 文件，服务器需要一些时间来生成 pdf 并做出响应，因此请求显示为待处理。我需要在请求开始时显示微调器，并在请求完成时隐藏它。如何使用 JavaScript ASP.NET MVC 完成此操作。- -更新 - - -示例控制器如下所示：public ActionResult DownloadFile() { return File(@"C:\Temp2\HolidayInnReceipt.pdf", "application/pdf", "Report.pdf"); }- -更新 - - -这是示例项目。
3 回答
慕桂英546537
TA贡献1848条经验 获得超10个赞
在 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> 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>
繁星coding
TA贡献1797条经验 获得超4个赞
您可以使用URL.createObjectURL获取下载blob对象的临时 url，然后只需使用带有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"
})
}
跃然一笑
TA贡献1826条经验 获得超6个赞
您可以使用 Ajax 请求来实现这一点。
步骤 1 创建 ajax 调用以创建 pdf 文件
步骤 2 返回保存的 pdf 文件路径并设置 window.location 以下载 pdf
在第 1 步——您可以使用以下方法显示微调器：
jQuery – AJAX 加载效果：使用 AJAX 请求显示内容的简单方法
例子：
<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>
- 3 回答
- 0 关注
- 419 浏览
添加回答
举报
0/150
提交
取消