JS - 从 URL 下载文件并显示百分比

Question

我在使用 JS 下载文件时遇到了一些问题。我在 Firebase 存储中有文件，我需要下载它们。我不会使用 Firebase 存储下载代码。

此文件下载地址如下。

https://firebasestorage.googleapis.com/...

我想要的是它在我说下载后立即从浏览器下载下载。 或者当我说下载时，下载将开始，我需要向用户显示下载的百分比。

首先，我在浏览器中找不到任何可以开始下载的内容。 浏览器是指它从浏览器的下载部分开始下载。

其次，我在后台下载和显示百分比时遇到了问题。为此，我尝试了一些方法。

1. 有一个名为 js-file-downloader 的库。它符合我的要求，但是当下载开始时我无法获得百分比并且下载完成后文件在新窗口中打开。它应该将文件下载到设备。 https://github.com/AleeeKoi/js-file-downloader

   <script src="js/downloader/dist/js-file-downloader.min.js"></script>

function download() {
    var url = "https://firebasestorage.googleapis.com/...";
    new jsFileDownloader({ 
        url: url,
        process: process,
        filename: "a.jpg"
    })
    .then(function () {
      console.log("Successfull");
    })
    .catch(function (error) {
      console.log("ERROR");
    });
}

function process (event) {
    if (!event.lengthComputable) return; 
    var downloadingPercentage = Math.floor(event.loaded / event.total * 100);
    console.log(downloadingPercentage)
  }; 

1. 我正在使用 AJAX 下载文件。这里唯一的问题是我无法获得下载百分比。

    function download() {
    var url = "https://firebasestorage.googleapis.com/...";
    $.ajax({
        url: url,
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        progress: function(e) {
            if (e.lengthComputable) {
                const completedPercentage = Math.round((e.loaded * 100) / e.total);
                console.log(completedPercentage);
              }
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = "a.png";
            document.body.append(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        }
    });
}

如果您能帮助我解决这个问题，我将非常高兴。从现在开始谢谢你。 如果有任何遗漏的信息，我会在你告诉我的时候补充。

Answer 1

它给了我想要的结果。

    var url = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4";
    
    $.ajax({
        url: url,
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener("progress", function (evt) {
                if(evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                }
            }, false);
            return xhr;
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = "google.mp4";
            document.body.append(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

--------- 编辑 ----------

上面的代码没有下载 .js 文件。可能还有其他我没有看到的问题。下面的代码消除了这些问题，效果更好。

这里不行，因为我没有输入网址。

var downloadcontrol = false;

$(document).ready(function () {

$(".download").off("click").on("click", function () {
var filename = ""; // Fill here
var url = ""; //firebase download url fill here
download(filename, url); // Use of
});
    
$(".downloadcancel").off("click").on("click", function () {
downloadcontrol = true;
});
    
});




function download(filename, url) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.addEventListener("progress", function (event) {
        if (event.lengthComputable) {
            if (downloadcontrol == true) {
                downloadcontrol = false;
                xhr.abort();
            }

            var percentcomplete = (event.loaded / event.total) * 100;
            $('.downloadbar').css({ 'width': percentcomplete + '%' });
            $('.downloadpercent').text(percentcomplete.toFixed(0) + '%');
        }
    });
    xhr.onload = (event) => {
        var blob = xhr.response;
        var downloaded = document.createElement('a');
        var downloadedurl = window.URL.createObjectURL(blob);
        downloaded.href = downloadedurl;
        downloaded.download = filename;
        document.body.append(downloaded);
        downloaded.click();
        downloaded.remove();
        window.URL.revokeObjectURL(downloadedurl);
    };
    xhr.open('GET', url);
    xhr.send();
}

.download {
width: 45%;
height: 50px;
background-color: white;
border: 2px solid green;
border-radius: 25px;
color: green;
margin-left: calc(5% - 5px);
cursor: pointer;
}

.downloadcancel {
width: 45%;
height: 50px;
background-color: white;
border: 2px solid red;
border-radius: 25px;
color: red;
margin-top:10px;
cursor: pointer;
}

.downloadprogressbar {
margin-top: 50px;
width: 90%;
margin-left: 5%;
border-radius: 10px;
background-color: rgb(243, 243, 243);
}

.downloadbar {
width: 0%;
height: 10px;
border-radius: 10px;
background-color: #1eb300;
}

.downloadpercent {
width: 90%;
margin-left: 5%;
margin-top: 10px;
font-size: 1.5em;
color: rgb(23, 196, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="download">DOWNLOAD</button>
<button class="downloadcancel">CANCEL</button>

<div class="downloadprogressbar"><div class="downloadbar"></div></div>
<p class="downloadpercent">0%</p>