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);
Related
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.
I am currently trying to trigger a file download using following code in Javascript:
window.location.href = downloadUrl;
That works fine in Chrome, IE and Edge, but Firefox unloads the page due to the new URL and hence closes all opened websockets. I know that this is an odd mannerism of FF, but is there any workaround which I can use?
It would work with window.open(downloadUrl); and closing the new tab after a certain timeout, but I would like to prevent opening a new tab just for triggering the download.
Any help would be appreciated, thanks.
After a lot of researching and experimenting I found the following solution:
Create a link in JavaScript with the download attribute, click it and remove it after some time (I am using ExtJs):
var a = document.createElement("a");
document.body.appendChild(a);
a.style = 'display: none';
a.href = downloadUrl;
a.download = 'test.zip';
a.click();
Ext.defer(function(link) {
document.body.removeChild(link);
}, 200, this, [a]);
Just stumbled on this issue. When user clicks a link (including 'download' one), browser believes he is leaving current page and closes websocket (this is likely reasonable). Opening link by Javascript onclick event (or window.open and so on) doesn't help. Setting target="_blank" helps, but creates uncomfortable blink at the moment of click. Finally I came up with the following:
<iframe src="about:blank" name="iframe_a" class="ws_keep_conn"></iframe>
Click this
CSS
.ws_keep_conn {position: absolute; left: -9999px; visibility: hidden;}
That's all, websocket lives, smooth behavior with no blink!
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.
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?
I'm using Backbone and html2canvas.js, this is the code I have so far for transforming a div to canvas and saving it. It works, but it doesn't add the .jpg extension. Because of this, after downloading the image, FF and Chrome first ask me about the program I want to use to open the file and IE just tells me that I don't have the right program and suggests visiting the store.
In FF and Chrome I can see the image when choosing the default Windows picture viewer etc.
What I would like to achieve is to add the .jpg extension so the file opens in the default program right away:
savePicture: function() {
//$(this.el).find('.drag-img').unwrap();
var image = $(this.el).find('#droppable2');
html2canvas(image, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/jpeg");
var frame = document.getElementById("myHideFrame");
if (!frame) {
frame = document.createElement("iframe");
frame.id = "myHideFrame";
document.body.appendChild(frame);
}
frame.src = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");
}
});
},
Sadly, IE8 and above only supports data URIs in CSS, <link>, and <img>. So adding it to a frame as you are doing will not work.
Could you, for IE8 and above, put the data into an <img> and ask the user to right click and save the image?