We Keep Coding

how to enable progress of downloading file using JavaScript or angular?

when i'm trying to download a file entire file is getting downloaded at once not able to see progress
below is the expected output
i tried below 2 approaches but didn't help
Approach 1
tried using file saver
FileSaver.saveAs(blob, "hello world.txt");
Approach 2
using pure javascript
downloadFileDirect(blob){
var a = document.createElement('a');
var bb = new Blob([blob], { type: 'text/plain' });
a.download = 'Upload.xlsx';
a.href = window.URL.createObjectURL(bb);
a.textContent = 'Download ready';
a.click();
}
in both the approaches file is getting downloaded at once
in backend its springboot

It's the browser that handles the download progress not Angular.

Not able to download the file with same format In Internet Explorer

I am using JavaScript to download file from specific Folder.
I am not able to download the file with same extension.
It's downloading with .html format.
How can i get rid of this issue especially in Internet Explorer ( IE )?
Here is Javascript Function
function downloadFile(baseUrl) {
window.open(baseUrl+'/appResource/FileFormat.docx','Download');
}

Which version of IE browser are you using? I tried to test the following code in IE 11 browser, they all download the file with the same file name and extension (Unless there is a file with the same name).
window.open('/file/Document2.docx', 'Download');
and
window.open('https://file-examples.com/wp-content/uploads/2017/02/file-sample_1MB.doc', 'Download');
Try to reset the IE browser setting and check if it solve the problem.
Besides, please refer to the following code, you could also read the file to blob (or base64 string) and then using the msSaveOrOpenBlob method to download the file with file name in IE browser, and use the a tag download attribute to download the file (because IE browser doesn't support the download attribute).
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//IE11 and the legacy version Edge support
console.log("IE & Edge");
let blob = new Blob([data], { type: "text/html" });
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {// other browsers
console.log("Other browsers");
var bl = new Blob([data], { type: "text/html" });
var a = document.createElement("a");
a.href = URL.createObjectURL(bl);
a.download = fileName;
a.hidden = true;
document.body.appendChild(a);
a.click();
}

Use javascript to generate a file to be downloaded. How to use the 'Save As' dialogue without HTTP headers?

I'm using this function to download a file:
function download(fileName, data) {
fileName = fileName.replace(/\s+/gi, '_').replace(/[^a-zA-Z0-9-.,_]/gi, '');
let blob = new Blob([data], {type: 'text/plain'});
if(window.navigator.msSaveOrOpenBlob){
window.navigator.msSaveBlob(blob, fileName);
}else{
let elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = fileName;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
// Example usage
$('button').on('click', function(){
download("test.txt", "test");
});
It works perfectly fine. However, it seems to download the file directly into the Downloads folder.
How can I make it open a 'Save As' dialogue instead, so the user can choose his preferred download location?
JSFiddle: https://jsfiddle.net/kbwrcL14/
I've seen suggestions before about manipulating the header like settiing a Content-Disposition -- however is that possible when you generate a file on-the-fly? Afaik headers are what is sent before the HTTP body, but by the time the JS code is running, the entire HTTP request has already finished, and the file is generated by the client itself.
Is there a way to make this work without using http headers?

JavaScript: Save file via data URL in IE

I have an app that converts files. I'm sending a file, and the converted file is being returned in the form of a data URL. Had everything working great in Chrome, but IE (10/11/Edge) is a different story. Have tried several things to no prevail:
1) HTML5 download attribute is not supported in IE. I tried assigning the returned URL as an anchor tag href, but invoking .click() is not supported, and manually clicking on the link does nothing.
2) window.navigator.msSaveOrOpenBlob() and File Saver.js. The SaveAs dialog pops up, but the blob is empty and never downloads anything.
var file= new Blob([returnedFile], {type: "application/pdf"});
window.navigator.msSaveOrOpenBlob(file, 'doc.pdf');
FileSaver.saveAs(file, 'doc.pdf');
Any ideas or suggestions to try?

First, try to verify saveAs existance:
if (window.saveAs) {
window.saveAs(blob, name);
} else {
navigator.saveBlob(blob, name);
}
As for the Blob itself:
create <a>
update href:
a.href = window.URL.createObjectURL(new Blob(returnedFile, {type: "application/pdf"}));
fire click event
More or less the same functionality can be reviewed there: http://jsfiddle.net/VB59f/2/

Ended up getting the browser via navigator.userAgent.match and handling the save based on each browser accordingly:
var saveData = (data, fileName) => {
IE:
FileSaver.saveAs(blob, fileName + "." + extension);
Chrome:
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.style.display = "none";
downloadLink.href = data;
downloadLink.download = fileName;
downloadLink.click();

Is there any way to implement download attribute in Safari

I am developing an Calendar App. Back-end will return the file name and ics format string to front-end in JSON. Then I wanna use JavaScript to force download the ics file. This is my code:
function downloadFile(fileName, content) {
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click");
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
I pass the fileName and content to this function, and it will generate a link to download this file. This works good in Chrome, but it cannot work in Safari 7. Is it because that safari does not support download attribute? Is there any way to implement this?