Downloading file instead of opening in javascript - javascript

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?

Related

document.click in for-loop only work once?

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

Download file using url doestwork JavaScript

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

Download Image with URL or Private (ASW S3) URL in Javascript

Normally, Downloading an image with its URL in HTML itself we can do like this
<a href="path-to-image.jpg" download>
<img src="path-to-image.jpg" />
</a>
for the same thing to achieve via javascript we can use like
const a = document.createElement('a')
a.href = 'image-url'
a.download = 'image-name.jpg'
document.body.appendChild(a);
a.click();
document.body.removeChild(a)
Both are working fine for data:image format.
If I click/run, Image will be download in my system for me
But If I use an image URL like 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcThv9yU8CfslQC7f7B5UkZyK-ZNMjdgXsgOxYgh8tdgsqwMBppx&usqp=CAU' or 'https://via.placeholder.com/300/09f/fff.png' are redirect to image page and displaying the image.
It should be download directly instead of displaying as a new tab.
DEMO: https://jsfiddle.net/Danielprabhakaran_N/54v7hfe1/25/
Help me with this guys.
Thanks.
a [download] can no longer download resources from a different origin.
it will work with same origin
Please find this link usefull to download othersite images

Force MP3 file to act as "Save as..." instead of playing in the browser

For a page which contains a list of mp3 files, I need to build a module for each listelement which has two button: a play and a download button. Clicking the play button, an mp3 player appears which plays audio in the browser as a fixed footer. I also need to provide a simple way for the user to download the file. The problem is that even if the audio tag contains a way to download (really download) the file, it does after clicking the more (3 dots) button. This is not what I want. I need to provide a direct download functionality for the download button. I started with the simplest approach:
//jsx
<a
target="_blank"
href={file.source}
download={file.name}
className="download-button"
type="application/octet-stream"
/>
(the last attribute: type is just from an answer I found for the problem, but doesn't make any change)
I've tried everything suggested, but the file still opens a new window and start to play the audio. The download attribute seems no longer working.
The second approach I was thinking of to define an audio tag istead of the a, define it without controls, and with JS, get the download attribute of it (as I saw a way how to split the features and build a custom player). But I haven't found a way to do it as .play() or .pause().
Are there any up-to-date way to force download on an audio file?
Here is a simple snippet to demonstrate using a blob to alter another blob's type.
For this is example I've use some HTML, and then make the blob into a html / text and then binary octect-stream for downloading.
const encoder = new TextEncoder();
const data = encoder.encode('This is <b>bold</b>');
function createLink(name, type) {
const a = document.createElement("a");
a.innerText = name;
document.body.appendChild(a);
document.body.appendChild(document.createElement('br'));
const blob = new Blob([data], {type})
const url = URL.createObjectURL(blob);
a.setAttribute('href', url);
}
createLink('HTML download', 'text/html');
createLink('TEXT download', 'text/plain');
createLink('Binary download', 'application/octet-stream');

Window that opens and closes [duplicate]

I am using this javascript function to launch download
function startDownload(url) {
window.open(url, 'Download');
}
It works, but i want to block any new tab or new window launch, thanks.
function startDownload(url) {
window.location.href = url;
}
This will start the download in the same page, exactly like when you click a link without any target other than _self.
To force the download of a file, make sure you send the right headers with it:
Content-Disposition: attachment; filename="mypdf.pdf";
This will make sure that the file is not displayed in the browser instead of being downloaded. Replace the filename part with the filename you want as default on the save as dialog.
window.open will open a new window \ tab (depending on user preferences) ... to just download the file use
window.location.href = url;
You can use this if the url returns a downloadable file rather than a web page
HTML5 solution with 'download' attribute
<a href="/images/myw3schoolsimage.jpg" download>
https://www.w3schools.com/tags/att_a_download.asp
<a target="_parent" href="link"></a>
_blank - URL is loaded into a new window. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded name - The name of the window

Categories