The webview not download file automatically to device. In html, I use a link tag and set attribute as download. In webview ios, just open and preview that file but not download automatically. At the same time, android nothing happened and reload page. I should fix in web script for download or it possible to setting or something in native app via webview ?
"react-native": "0.70.6",
"react-native-webview": "^11.26.0",
<Webview
javaScriptEnabled={true}
domStorageEnabled={true}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccess={true}
originWhitelist={['*']}
mixedContentMode={'always'}
/>
In my web script
const downloadFileFromObjectUrl = (source, filename) => {
const downloadUrl = window.URL.createObjectURL(source)
const link = document.createElement('a')
link.href = downloadUrl
link.setAttribute('download', filename)
document.body.appendChild(link)
link.click()
link.remove()
}
Thank everyone for suggestion.
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 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
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
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');
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);