How show file download progress using javascript? - Stack Overflow

admin管理员组

文章数量:1277896

I am using below code to download the file to browser.

function UserAction() {
 
 var Url = " ";

  var postData = new FormData();
  var xhr = new XMLHttpRequest();
  xhr.open('GET', Url, true);
  xhr.responseType = 'blob';
  xhr.onload = function (e) {
    var blob = xhr.response;
    this.saveOrOpenBlob(blob,blobName);
  }.bind(this)
  xhr.send(postData);

}

function saveOrOpenBlob(blob,blobName) {
  //var assetRecord = this.getAssetRecord();
  var fileName = blobName;
  var tempEl = document.createElement("a");
    document.body.appendChild(tempEl);
    tempEl.style = "display: none";
      url = window.URL.createObjectURL(blob);
      tempEl.href = url;
      tempEl.download = fileName;
      tempEl.click();
  window.URL.revokeObjectURL(url);
}

I want to display the download progress, I am not using any html code. My application has standard button which accept javascript action. I dont have any custom ui.

With current condition user will not know whether the file is downloading or not if it is a large file.

How can I achieve this?

I am using below code to download the file to browser.

function UserAction() {
 
 var Url = " ";

  var postData = new FormData();
  var xhr = new XMLHttpRequest();
  xhr.open('GET', Url, true);
  xhr.responseType = 'blob';
  xhr.onload = function (e) {
    var blob = xhr.response;
    this.saveOrOpenBlob(blob,blobName);
  }.bind(this)
  xhr.send(postData);

}

function saveOrOpenBlob(blob,blobName) {
  //var assetRecord = this.getAssetRecord();
  var fileName = blobName;
  var tempEl = document.createElement("a");
    document.body.appendChild(tempEl);
    tempEl.style = "display: none";
      url = window.URL.createObjectURL(blob);
      tempEl.href = url;
      tempEl.download = fileName;
      tempEl.click();
  window.URL.revokeObjectURL(url);
}

I want to display the download progress, I am not using any html code. My application has standard button which accept javascript action. I dont have any custom ui.

With current condition user will not know whether the file is downloading or not if it is a large file.

How can I achieve this?

• javascript
• download
• xmlhttprequest

Share Improve this question Follow asked Jul 15, 2021 at 9:06 amrutha varshiniamrutha varshini 13122 gold badges22 silver badges77 bronze badges 2

• 1 Does this help? stackoverflow./q/44656595/14032355 – ikhvjs Commented Jul 15, 2021 at 9:28
• Thank you for the information. But I don't want to have custom progress bar. How can i make the browsers default download progress to work? – amrutha varshini Commented Jul 16, 2021 at 4:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Use this:

function saveOrOpenBlob(url, blobName) {
    var blob;
    var xmlHTTP = new XMLHttpRequest();
    xmlHTTP.open('GET', url, true);
    xmlHTTP.responseType = 'arraybuffer';
    xmlHTTP.onload = function(e) {
        blob = new Blob([this.response]);   
    };
    xmlHTTP.onprogress = function(pr) {
        //pr.loaded - current state
        //pr.total  - max
    };
    xmlHTTP.onloadend = function(e){
        var fileName = blobName;
        var tempEl = document.createElement("a");
        document.body.appendChild(tempEl);
        tempEl.style = "display: none";
        url = window.URL.createObjectURL(blob);
        tempEl.href = url;
        tempEl.download = fileName;
        tempEl.click();
        window.URL.revokeObjectURL(url);
    }
    xmlHTTP.send();
}

本文标签： How show file download progress using javascriptStack Overflow