We Keep Coding

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();
}

Saving CSV file using blob in Safari

I have codes below to generate the download link so that users could download the .csv file on my site.
var link = document.createElement("a");
link.id = "csvDwnLink";
window.URL = window.URL || window.webkitURL;
var csv = "\ufeff" + CSV,
blob = new window.Blob([csv], {type: 'text/csv, charset=UTF-8'}),
csvUrl = window.URL.createObjectURL(blob),
filename = 'export.csv';
$("#csvDwnLink").attr({'download': filename, 'href': csvUrl});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);
I hope the user could click the download link with csvUrl to download the cvs file.
It works on chrome. However, when I click the same link using Safari, it will directly show me the content of the csv file in the tab.
How do I solve this problem so that the safari will show the saving file window which user could select the path where they want to save the file instead of showing the content of the cvs file directly when I click the download link?
Hope someone could me some recommendations or alternative methods.
Thanks in advance!
== Updated ==
Find out solutions here
solution 1,
solution 2
The code will be:
var link = document.createElement("a");
link.id = "csvDwnLink";
document.body.appendChild(link);
window.URL = window.URL || window.webkitURL;
var csv = "\ufeff" + CSV,
csvData = 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(csv),
filename = 'filename.csv';
$("#csvDwnLink").attr({'download': filename, 'href': csvData});
$('#csvDwnLink')[0].click();
document.body.removeChild(link);
Safari will download the file for the user, however, the file name will be unknown, probably it's because Safari don't support 'download' attribute yet as raphael mentioned.

I did a quick research - I looks like Safari does not support what you are trying to achieve.
The reason why your solution works in Chrome (and Firefox) is that they support the download attribute - Safari doesn't yet.

Safari 10.1+ supports "download" attribute. It should work now.
https://github.com/eligrey/FileSaver.js/issues/129#issuecomment-275221240

encodeURI file download - crashing browser

I created a web application to clean up CSV/TSV data. The app allows me to upload a CSV file, read it, fix data, and then download a new CSV file with the correct data. One challenge I have run into is downloading files with more than ~ 2500 lines. The browser crashes with the following error message:
"Aw, Snap! Something went wrong while displaying this webpage..."
To work around this I have changed the programming to download multiple CSV files not exceeding 2500 lines until all the data is downloaded. I would then put together the downloaded CSV files into a final file. That's not the solution I am looking for. Working with files of well over 100,000 lines, I need to download all contents in 1 file, and not 40. I also need a front-end solution.
Following is the code for downloading the CSV file. I am creating a hidden link, encoding the contents of data array (each element has 1000 lines) and creating the path for the hidden link. I then trigger a click on the link to start the download.
var startDownload = function (data){
var hiddenElement = document.createElement('a');
var path = 'data:attachment/tsv,';
for (i=0;i<data.length;i++){
path += encodeURI(data[i]);
}
hiddenElement.href = path;
hiddenElement.target = '_blank';
hiddenElement.download = 'result.tsv';
hiddenElement.click();
}
In my case the above process works for ~ 2500 lines at a time. If I attempt to download bigger files, the browser crashes. What am I doing wrong, and how can I download bigger files without crashing the browser? The file that is crashing the browser has (12,000 rows by 48 columns)
p.s. I am doing all of this in Google Chrome, which allows for file upload. So the solution should work in Chrome.

I've experienced this problem before and the solution I found was to use Blobs to download the CSV. Essentially, you turn the csv data into a Blob, then use the URL API to create a URL to use in the link, eg:
var blob = new Blob([data], { type: 'text/csv' });
var hiddenElement = document.createElement('a');
hiddenElement.href = window.URL.createObjectURL(blob);
Blobs aren't supported in IE9, but if you just need Chrome support you should be fine.

I also faced same problem. I used this code,it will works fine. You can also try this.
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(new Blob([base64toBlob($.base64.encode(excelFile), 'text/csv')]),'data.csv');
} else {
var link = document.createElement('a');
link.download = 'data.csv';
// If u use chrome u can use webkitURL in place of URL
link.href = window.URL.createObjectURL(new Blob([base64toBlob($.base64.encode(excelFile), 'text/csv')]));
link.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?

downloading images through a javascript in Firefox

I have developed a simple web site which will download a image file form a server
in my web page I have a "download" button. When I click on it following is the code I used to download the image file:
var downloadLink = document.createElement("a");
downloadLink.href = $scope.urlValue2 + "&downloadName=" + fileName + ".jpg";
downloadLink.download = fileName+'.jpg';
downloadLink.type = 'image/jpg';
document.body.appendChild(downloadLink);
downloadLink.click();
This is working fine in chrome but in firefox this is not working. What might be the problem?

According to this website, the correct MIME type for JPEG images is image/jpeg
Try to replace 'image/jpg' with 'image/jpeg'