Safari - data export/html download attribute not working - javascript

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.

Related

maps.apple.com search does not open apple maps [duplicate]

I've build a web page that let's you select a page name from a drop down list and then transfers the browser to that page. The code that does the transfer is
if (url){
window.open(url, '_blank');
}
where "url" is the page selected.
A console log just before the window.open line prints something like:
executing: window.open(http://www.mywebsite.com/44/threats.html, '_blank')
and then the browsers opens the page in a new tab.
This works fine on Windows 7 for all the browsers, including Safari.
On an iMac it works for Firefox but not for Safari.
Does anyone know why iMac/Safari won't do this?
Safari is blocking any call to window.open() which is made inside an async call.
The solution that I found to this problem is to call window.open before making an asnyc call and set the location when the promise resolves.
var windowReference = window.open();
myService.getUrl().then(function(url) {
windowReference.location = url;
});
Using setTimeout
Wrapping your window.open(url, '_blank') line of code in the async function with a setTimeout works as well,
setTimeout(() => {
window.open(url, '_blank');
})
setTimeout code runs on the main thread, instead of the asynchronous one.
Tested in Chrome and Safari.
To use window.open() in safari you must put it in an element's onclick event attribute.
For example:
<button class='btn' onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>
You can't rely on window.open because browsers may have different policies. I had the same issue and I used the code below instead.
let a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = <your_url>;
a.download = <your_fileName>;
a.click();
document.body.removeChild(a);
Taken from the accepted answers comment by Steve on Dec 20, 2013:
Actually, there's a very easy way to do it: just click off "Block popup windows" in the iMac/Safari browser and it does what I want.
To clarify, when running Safari on Mac OS X El Capitan:
Safari -> Preferences
Security -> Uncheck 'Block pop-up windows'
window.location.assign(url) this fixs the window.open(url) issue in ios devices
Open link in a new tab, programatically with JavaScript for: safari, mobile safari and other browsers:
const link = 'https://google.com';
const a = document.createElement("a");
a.setAttribute('href', link);
a.setAttribute('target', '_blank');
a.click();
There's a setting in Safari under "Tabs" that labeled Open pages in tabs instead of windows: with a drop down with a few options. I'm thinking yours may be set to Always. Bottom line is you can't rely on a browser opening a new window.
This should work: window.location.assign(url);
Usually it is important to save the state, before leaving the page, so have this in mind as well.
The correct syntax is window.open(URL,WindowTitle,'_blank') All the arguments in the open must be strings. They are not mandatory, and window can be dropped. So just newWin=open() works as well, if you plan to populate newWin.document by yourself.
BUT you MUST use all the three arguments, and the third one set to '_blank' for opening a new true window and not a tab.

File is not opening automatically in Safari after download

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

One link for Firefox and Chrome add-ons?

I have add-on for Chrome and Firefox, they are same just for different browsers. Is it possible to have one link/button for the add-on, once user clicks it, it will be recognized which browser user is on and opens Chrome vs Firefox add-on.
It would be possible to have in html 2 buttons and hide one for each browser, but I would like to have just one button.
Thanks!
You can extract browser name from navigator.userAgent then set needed link
Add-on Link
<script>
var link = document.querySelector("#link");
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") > 0) {
link.setAttribute("href", "https://www.mozilla.org");
} else if (userAgent.indexOf("Chrome") > 0) {
link.setAttribute("href", "https://google.com");
}
</script>

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

Categories