Pause a download with XMLHttpRequest in Javascript - Stack Overflow

admin管理员组

文章数量:1344322

I am trying to download a file using web link with Javascript's XMLHttpRequest Object.I am not able to find out whether is it possible to pause a download and later resume it?

I am trying to download a file using web link with Javascript's XMLHttpRequest Object.I am not able to find out whether is it possible to pause a download and later resume it?

• javascript
• xmlhttprequest

Share Improve this question Follow asked Mar 10, 2014 at 7:07 Rakesh_KumarRakesh_Kumar 1,45211 gold badge1717 silver badges3030 bronze badges 1

• 1 I don't think it's possible. – Derek 朕會功夫 Commented Mar 10, 2014 at 7:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Technically it's possible, Without pause / resume you could just do a XmlHttpRequest with responseType "blob" and then forward the blob to the user via a link (instant download via click like mega)

But if you want a pause / resume i've read you must use the method abort of the XmlHttpRequest, create a temporary blob and when the user resume the download you need to start a new xhr from the byte where your previous request stop. After finishing the download (or a new abort occurs) you need to add all the new byte to the previous blob.

I need to try that, but the only limit (I think) can be a browser crash or a blob quota exed.

Sorry for my english, i'm a french frog ;)

No. It is not possible. Some suggest to just call abort() on your xhr object and save the received blob in some variable and so on but unfortunately, that's just their wish because as soon as the abort() is called the xhr object is discarded with all the data it previously downloaded. There is no way you can save the downloaded data in the middle of running xhr. Progress event of xhr will just give you the info about the bytes downloaded but not the actual data downloaded. Neither this downloaded data is cached so we cannot resume it.

However, there is one way around to pause the xhr and resume later is to call xhr with Bytes-Range Header. But for this to work, your server needs to accept Byte-Range Header. Most of today's server does it by default.

request.responseType = 'blob'; //<--I set responseType as Blob
request.setRequestHeader('Range', `bytes=${bytesFrom}-${bytesTo}`);

You will need to call plete xhr requests from open() method to onload event with bytesFrom & bytesTo, save the received chunk in an array. Then repeat the requests with Next bytes until your bytesTo are equal to the totalBytes of file. Each time receive the chunk in onload event, save it in array.

chunksArray.push(this.reponse);

When all of your chunks are received, you can call

let downloadedFile = new Blob(chunksArray);

To get this Blob in your use, you can create a URL

let downloadedFileURL = URL.createObjectURL(downloadedFile);

So, unless you don't call xhr with Next bytes, your XHR is paused and when you call xhr request with Next bytes, it resumes.

you can do it but it also depends on the server ability to do so.

To "Pause", you can abort() your request and keep somewhere the already received response. How to cancel/abort jQuery AJAX request?

And to resume you have to ask the server to send only the missing parts. It is all about http ranges and partial contents. Here is some good reading about it : https://developer.mozilla/en-US/docs/Web/HTTP/Range_requests

本文标签： Pause a download with XMLHttpRequest in JavascriptStack Overflow