I need to start a download by pressing a button, I tried use the follow code, but it DOESN'T start the download, just open a new tab in browser and show the content. I am doing wrong?
The dataurl is exactly something like : http://localhost:8000/storage/shipment/b61ffc10-6798-4b94-ba91-daec6efbbdfdShipment2020-10-05.txt
download: function(name, dataurl) {
const link = document.createElement("a");
link.setAttribute("download", name+'.txt');
link.setAttribute("target", "_blank")
link.href = dataurl;
document.body.appendChild(link);
link.click();
}
I also tried convert the url to Blob
const url = window.URL.createObjectURL(new Blob([data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
},
That way, it trigged the download, but the content was the url, not the file itself.
Any idea? Thanks!
if you want to download a content from your server try this one , its so simle...
Click here to Download
Added Download Atribute in <a> tag , when clicking on this link, the file will download as filename-here.txt
Related
I'm trying to download an image from URL and the page reloads and I will be disconnected from my socket server
is there any way to download a file without reloading the page
and also with out using target="_blank"
const downloadImage = () => {
const a = document.createElement("a");
a.href = message.downloadImageUrl;
a.download = "downlaodImage";
a.click();
};
I'm trying to download some object in the page from console. But it only save when I=3(last iteration), I think the problem may be the need to wait for downloads, but idk how to solve it.
First, the elements are render by canvas, so I turn them to image format.
Then, turn them into element, and click it to download.
I use the way in How to save a base64 image to user's disk using JavaScript?
But it only work in last iteration... any help? much thanks.
for(let i=1;i<=3;i++){
// load image
item_id = 'page'+i;
document.getElementById(item_id)
let image = document.getElementById(item_id).toDataURL("image/png").replace("image/png", "image/octet-stream");
// download image
var link = document.createElement("a");
document.body.appendChild(link);
link.setAttribute("href", image);
link.setAttribute("download", item_id+'.png');
link.click();
}
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 use a function http://js.cytoscape.org/#cy.jpg to get the graph in jpg format.
I use it with window.location.assign(cy.jpg());, but it opens the image opens in the same tab.
I want it to download instead of opening in the tab. I guess I have to set content-disposition = attachment or something like that.
Edit
I solved it with
const link = document.createElement('a');
link.download = 'filename.png';
link.href = cy.png();
link.click();
however, it is not compatible in all browsers.
You can set <a> element href attribute to result of cy.png(), set download attribute at <a> element, call click() on <a> element.
Alternatively, you can replace MIME type "image/png" portion of data URI returned by cy.png() with "application/octet-stream", then set location.href to replacement data URI
var url = cy.png();
url = url.replace("image/png", "application/octet-stream");
window.location.href = url;
See also How to download a file without using <a> element with download attribute or a server?
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);