File is not opening automatically in Safari after download - javascript

I am using below code to download the file. My requirement is to open file automatically once the download is completed.
var l_base64data = l_filetype + l_string
var a = document.createElement('a')
a.href = l_base64data
a.download = l_filename
a.click()
It's working fine in Chrome and Firefox but it's not working in Safari. Kindly suggest if there is anything I am missing any browser specific code.
Thanks,
Lakshman

Related

Download file using URL in firefox not working in angular JS [duplicate]

This question already has an answer here:
HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (*)
(1 answer)
Closed 5 years ago.
My code works in google chrome that provide download and in firefox it always show in new tab or selftab like XML file open in firefox how should I can download it?
So provide me some suggestion to download functionality in angular JS or Java script for Firefox!
This is my code which I tried
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', filename);
The anchor tag you are creating also needs to be added to the DOM in Firefox, in order to be recognized for click events.
document.body.appendChild(link);
link.click();
The problem is, that you have to encode the url with javascript function encodeURIComponent(URI) and, like Catalin lancu said before me, add the anchor tag to the DOM.
Here is a function I wrote some time back to download files:
function downloadFile(content, filename, type){
var a = document.createElement('a');
a.href = type+','+encodeURIComponent(content);
a.target = '_blank';
a.download = filename;
document.body.append(a);
a.click();
document.body.removeChild(a);
}
Hope this helps.

Safari - data export/html download attribute not working

My app allows users to export GeoJSONs as .json files... the download works just fine in Chrome and Firefox, but in Safari, the user is directed to a url with data:text/ + GEOJSON STRING and the text of the GeoJSON is rendered on the page - no download at all.
$('#export_table > tbody > tr > td').each(function(){
geoObject = JSON.parse($(this).html());
layerName = geoObject.name;
exportRowToGeoJSON($(this).html(), layerName);
});
function exportRowToGeoJSON(storageObj, fileName){
dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(storageObj);
link = document.createElement('a');
link = document.body.appendChild(link); //FOR FIREFOX
link.setAttribute("href", dataStr);
link.setAttribute("download", fileName + ".json");
link.click();
};
So rather than triggering a download of the href datasStr as it does in the other browsers, Safari treats the href attribute as a url to link to.
Any way that I can get this functioning properly across Chrome, Firefox, and Safari?
Please look at w3schools.com
As you can see, you must be using a version of Safari that is under 10.1, correct? Is so, I do recommend updating your browser, or switch to Chrome, Firefox, or Opera.
Any version lower than 10.1 in safari has no support for HTML5 attributes/tags, which is why some websites require and updated browser.

Programatically opening a link in target="_blank" does not work in Safari?

See example here: https://plnkr.co/edit/dRjuBCR7buHYkIPAYDkX?p=preview
It works in Firefox, Chrome, and (I believe) IE, but not Safari. If I remove the target line, it works in all of the above, so the target is the problem from what I can tell...
var a = document.createElement( 'a' );
a.target = '_blank';
a.href = 'http://www.google.ca/'
document.body.appendChild( a );
a.click();
(This is a simplified example; I'm using a download like this to serve a generated CSV file to the user)
Is there any way around this? I don't want the clobber the user's view with CSV.
Edit: Alternate question: I have the URL to a CSV file. How do I make Safari download it?

How to download canvas image(base64) in javascript

I am using html2canvas. Chrome downloads the image but other browser
don't download the image.
This is the code:
html2canvas($("body")[0], {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var link = document.createElement('a');
link.download = "test.png";
link.href = img;
link.click();
}
});
How can I get the image to download on other browsers?
download attribute is not wide compatible.
http://caniuse.com/#feat=download
However, it works in Firefox, Chrome, Opera and Android, if doesn't work for you it's probably because the user doesn't make a click event (you are attempting to download on rendered event), so Chrome have a security bug.
If user doesn't make click in nowhere, no clicks will be triggered due security reasons. Obvious.
It works for me if I add the link into the page before trigger click as below,
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);

Why does Save Chart function work so differently across browsers?

I am using the following function to allow the user to save an image. (Half the charts they might want to save as image are hidden, so they can't right click on them. They're displayed instead as SVGs.) I also want download-as-image options available for those who don't know about right clicking on images.
This is all working perfectly in my text editor & Chrome. I click the button with the saveChart function attached and the file downloads. In Safari a new tab opens at the URL - not the behaviour I want but understandable. I can't test on IE. But on Firefox nothing happens at all. It's as though i haven't pressed the button.
JS is enabled and works on other buttons / functions.
function saveChart(obj) {
var tempStr = obj.parentNode.id;
var newID = Number(tempStr.substr(6,tempStr.length-6));
var a = document.createElement('a');
a.href = 'charts/chart'+newID+'.png';
a.download = 'image.png';
a.click();
}
Is the difference caused by user security settings and if so what are they? Is there any way to secure the same (download) behaviour cross-browser?
Thanks
Emma

Categories