下载文件时显示进度条

目标：

我想在下载文件时显示进度条。

到目前为止，我已经尝试过：

AJAX代码：

    $.ajax({
            async: true,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                console.log(xhr);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) { 
                        var percentComplete = (evt.loaded / evt.total) *100;
                        $("div.progress > div.progress-bar").css({ "width": percentComplete + "%" }); 
                    } 
                },false);
            return xhr;
            }, 
            url: $("#CardExportCardsForm").attr('action'),
            data: $("#CardExportCardsForm").serialize(),
            success: function(data){
                //console.log(data);
            }

        });

HTML代码：

进度条：

 <div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    </div> 
</div>

我面临的问题：

AJAX请求运行良好。它得到了一个成功的响应，并且文件正在被成功处理。

但是，它并没有显示任何地方的下载进度。我甚至尝试过在日志中打印percentComplete，但没有成功。

如有任何帮助，我们将不胜感激。

提前感谢！