下载文件时 ASP.NET Core 繁忙指示器

Question

在我的网页上，当用户单击下载按钮时，控制器会调用导出操作，生成一个 Excel 文件，然后将其返回给用户。根据传递给操作的参数，有时需要一些时间来生成文件并将其返回给用户。

所以，我想在等待文件时显示一个忙碌指示符。我选择了 Bootstrap 微调器。

$('.content').on('click', 'a.export', function (e) {
    e.preventDefault();

    // show busy indicator
    $('#divSpinner').css('display', 'inline-block');

    var idSelect = '';
    $('#ddlSelect option:selected').each(function () {
        idSelect += $('#ddlSelect')[0].value;
    });

    var idSelect2 = '';
    $('#ddlSelect2 option:selected').each(function () {
        idSelect2 += $('#ddlSelect2')[0].value;
    });

    var url = 'Home/Exports?' + 'param1=' + idSelect + '&param2=' + idSelect2;

    //download file
    window.location = url;

    // hide busy indicator
    $('#divSpinner').css('display', 'none');
});

好吧，这种方法有效，但问题是 $('#divSpinner').css('display', 'none'); 立即被击中，并且微调器隐藏在文件之前实际可供用户下载（浏览器下载/打开窗口）。

如何重写代码以等待 window.location=url 完成然后隐藏微调器？

编辑： 我还尝试将下载部分包装在这样的异步函数中：

async function Download(url) {

    let promise = new Promise((resolve, reject) => {
        resolve(window.location = url);
    });

        let result = await promise; // wait until the promise resolves (*)
}

并这样称呼它：

Download(url)
    .then(function() {
        $('#divSpinner').hide()
});

下载有效，但在文件下载呈现给用户之前，$('#divSpinner').hide() 仍然被点击。 async/await 的全部意义不在于在继续执行代码之前等待结果吗？？

EDIT2（带有“blob”）：

async function Download(url) {
    let promise = new Promise((resolve, reject) => {
        resolve(filedownload(url));
    });
    let result = await promise; 
}

function filedownload(urlToSend) {
    var req = new XMLHttpRequest();
    req.open("GET", urlToSend, true);
    req.responseType = "blob";
    req.onload = function (event) {
        var blob = req.response;
        var fileName = req.getResponseHeader("fileName") 
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
    };
    req.send();
}

并这样称呼它：

Download(url)
    .then(function() {
        $('#divSpinner').hide()
});

编辑 3：我从下面使用了 @Nenad 的解决方案，但我只更改了响应标头的处理（否则我在下载时得到 NULL 文件名 - 我使用了这个解决方案 https://stackoverflow.com/a/40940790/7975627） ：

function filedownload(urlToSend, resolve) {
    var req = new XMLHttpRequest();
    req.open("GET", urlToSend, true);
    req.responseType = "blob";
    req.onload = function (event) {
        var blob = req.response;
        var filename = "";
        var disposition = req.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;    
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) {
                filename = matches[1].replace(/['"]/g, '');
            }
        }
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.click();
        resolve(filename); // call resolve after download has finished.
    };
    req.send();
}

Answer 1

var url = 'Home/Exports?' + 'param1=' + idSelect + '&param2=' + idSelect2;

$(document).load(url, function () {
    // hide busy indicator
    $('#divSpinner').css('display', 'none');
});

我不确定，但是你能试试这个吗？

Answer 2

TL;DR

您将控制权委派给浏览器，因此在您的页面上没有 JavaScript 通知。

详细说明：

您用来下载文件的方法 (window.location = url;) 告诉浏览器加载新页面而不是当前页面。您正在将新页面的加载控制委托给浏览器，就像 url 指向另一个 HTML 页面一样。

只有在浏览器发现内容不是 HTML 而是其他内容之后，它才会根据标题下载文件，而不是抛出当前页面并显示新页面。

引导浏览器下载内容的标头是：

• content-disposition: attachment
• content-type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

不同的方法是使用 AJAX 请求下载responseType=blob。 很好的例子是here。这种方法的缺点是：

• 旧版浏览器不支持此功能。
• 在保存之前，整个文件已加载到 JavaScript 内存中。

但是您可以控制blob 下载后发生的事情 已完成。

更新：查看您的第二次编辑，您提前致电resolve。另外，您应该从下载方法中返回您的Promise。

async function Download(url) {
    return new Promise((resolve, reject) => {
        filedownload(url, resolve); // pass resolve
    }); 
}

function filedownload(urlToSend, resolve) {
    var req = new XMLHttpRequest();
    req.open("GET", urlToSend, true);
    req.responseType = "blob";
    req.onload = function (event) {
        var blob = req.response;
        var fileName = req.getResponseHeader("fileName") 
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        resolve(fileName); // call resolve after download has finished.
    };
    req.send();
}