React Native Webview is not download automatically. Both ios and android - javascript

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

how to stop reloading the page when downloading an image using anchor tag

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

File is not opening automatically in Safari after download

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

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');

How to download canvas image(base64) in javascript

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

Categories