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

Question

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

此文件下载URL如下。

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

我要的是它一说下载就从浏览器下载。或者当我说下载时，下载就会开始，我需要向用户显示下载的百分比。

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

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

有一个名为 js-file-downloader 的库。它符合我的要求，但是当下载开始时我无法获得百分比，当下载完成时文件在新的 window 中打开。它应该将文件下载到设备。 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)
  };

我正在使用 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 文件。可能还有其他我没有看到的问题。下面的代码消除了这些问题并且工作得更好。

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

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>

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

JS - Download file from URL and show percentage

javascript

download