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'
Related
I get my file url form backend api, now I want to download it when user click the button.
It works when the file is excel(xlsx）, but for txt files or pictures(jpeg，png), it will only open in a new tab instead of downloading it.
$scope.download = function (row) {
var url = row.entity.downloadUrl;//the correct path of file server
window.open(url, "_blank");//problem lies in here
};
How to make it in AngularJS?
Below is the request
try this:
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.style = "display: none";
downloadLink.href = value.FilePath;
downloadLink.download = value.FileName;
downloadLink.click();
downloadLink.remove();
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();
Are there any solutions for downloading a .CSV file that generated on server instead of opening it on Safari ?
My system:
MAC OS X El Capitan 10.11.5
Safari 9.1.1
I used this method to download an .ICS file and it works document.location = <link to file>;. However when I applied it for downloading .CSV file, it just open the file on browser.
I also tried to use download attribute with the instructions from somewhere in stackoverflow but it still doesn't work
var link = $("<a />");
link.appendTo("body");
link.attr("id", "csvDwnLink");
window.URL = window.URL || window.webkitURL;
var csv = "\ufeff" + "col1;col2;col3",
blob = new window.Blob([csv], {type: 'text/csv, charset=UTF-8'}),
csvUrl = window.URL.createObjectURL(blob),
filename = 'export.csv';
link.attr({'download': filename, 'href': csvUrl, 'target': '_blank'});
$(link)[0].click();
the fiddle: http://jsfiddle.net/628mmkww/2/
Is anyone facing the same problem with me ?
Thanks.
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
Need advice around options for handling a simple file download (.ics) in a Javascript app.
Assuming s.icsMsg is a well-formatted text/calendar string, the below works in Chrome:
var downloadLink = document.createElement("a");
downloadLink.href = 'data:text/calendar;charset=utf-8,' + s.icsMsg;
downloadLink.download = "Calendar.ics";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
File is downloaded, correctly named and opens into the mail client. In IE 9+ I get a data area size error.
Is there a way of achieving this in IE, purely on the client? I understand I can do it by setting the content-disposition in the http headers, but since the file is generate on the client-side, it's two extra hops to push it up, save it, then send it back with the correct headers (if that would even work).
Any advice would be great...
Found a solution. Works fine in IE10/11, anything earlier I'm just not showing the link that triggers this function. Figured the majority of users will be on mobile devices, so old IE won't be an issue.
Would use window.open() for non-IE browsers, but can't find how to set the file name. Not phased though, all is working.
if (!s.isIE) {
var downloadLink = document.createElement("a");
downloadLink.href = 'data:text/calendar;charset=utf-8,\r\n' + escape(s.icsMsg);
downloadLink.download = "Calendar.ics";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
else {
var blob = new Blob([s.icsMsg]);
window.navigator.msSaveOrOpenBlob(blob, 'Calendar.ics');
}