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
Related
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();
}
I'm trying to open a base64 PDF file in a new tab by using iframe. While opening that PDF in new tab file name is showing as data: attached my screenshot below. How can I change or set the file name?.
Note: I don't want to download the PDF I need to open in a new tab. Thanks in advance
My Code
const pdfWindow = window.open('');
pdfWindow.document.write(
"<iframe width='100%' height='100%' src='data:application/pdf;base64, " +
encodeURI(base64PDF) +
"'></iframe>",
);
Maybe this way you can use. There may have been a mistake in the arrangements.
let file = 'data:application/pdf;base64'
let prntWin = window.open();
prntWin.document.write("<html><head><title>your title in here</title></head><body>"
+ '<iframe width="100%" height="100%" src="'+ file + '" '
+ 'type="application/pdf" ></body></html>');
prntWin.document.close();
There is a way to show the filename you want, but it needs to save the base64 to LocalFileSystem.
Then the iframe load this file in LocalFileSystem.
And it needs user to grant permission once to the browser.
It works on Chrome. You can refer to below demo:
https://pdf-filename.glitch.me/
Souce:
https://glitch.com/edit/#!/pdf-filename?path=index.html%3A1%3A0
The download button fail to work...
Edit:
If you would like to use pdf.js, you can refer to:
https://daniel4wong-pdfjs-demo.glitch.me/
The title that you are refering to is in the metadata of the PDF document itself. You will need to edit the title in the document.
You can use an online editor (like https://pdfcandy.com/edit-pdf-meta.html) or any suitable PDF application.
If you are generating your PDF's on the backend you need to set the proper metadata over there.
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');
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?