Download Data Url File

Download data URL file

Ideas:

Try a <a href="data:...." target="_blank"> (Untested)
Use downloadify instead of data URLs (would work for IE as well)

Making a downloadable file with the dataURL

Your approach is wrong.

The readAsDataURL method is used to read the contents of the specified Blob or File.
The result will be base64 encoded string.

The readAsDataUrl method can be used to make a image preview.

To download the file you can go by this approach

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
     <form>
        <label for="file">ChooseFile</label>
        <input type="file" id="myFile" accept="image/*">
    </form>

    <script>
        document.getElementById("myFile").addEventListener("change", downloadFile);

        function downloadFile() {            
            let file = this.files[0];
            let url = URL.createObjectURL(file);

            let link = document.createElement('a');
            link.href = url;
            link.download = file.name;
            link.click();
            link = null;

            URL.revokeObjectURL(url);
        }
    </script>
  </body>
</html>

Useful resources

FileReader
createObjectURL
revokeObjectURL

C# - Download file from data URL

Assuming you have the data url as a string,

First, extract the data using regex.

Then convert the base64 to bin and save the file.

//Input data url
string dataURL;

//Get Path and Filename
string filename = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "image.png");

//Match Regex
var base64Data = Regex.Match(stringName, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
var binData = Convert.FromBase64String(base64Data);

//Write file. This will overwrite any existing file.
File.WriteAllBytes(filename, binData);

Download files using url in javascript

You can use HTTP clients like Axios. It makes it easy to send async HTTP requests to REST endpoints and perform CRUD operations.

You can refer to the snippet below that I have used in my previous projects for file downloads. I guess this is what you are looking for:

const fs = require('fs')  
const Path = require('path')  
const axios = require('axios')
const crypto = require('crypto')

async function downloadFile(url) {
    const uuid = crypto.randomUUID()

    const path = Path.resolve("./utils", "uploads", uuid)
    const writer = fs.createWriteStream(path)
    
    const response = await axios({
        url,
        method: 'GET',
        responseType: 'stream'
    })
    
    response.data.pipe(writer)

    return new Promise((resolve, reject) => {
        writer.on('error', reject)
        response.data.on('end', () => {
            resolve(uuid)
        })
    })
}

Hope this helps, and don't forget to check out their documentation. Here is the
link.

Download File Using JavaScript/jQuery

Use an invisible <iframe>:

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

To force the browser to download a file it would otherwise be capable of rendering (such as HTML or text files), you need the server to set the file's MIME Type to a nonsensical value, such as application/x-please-download-me or alternatively application/octet-stream, which is used for arbitrary binary data.

If you only want to open it in a new tab, the only way to do this is for the user to a click on a link with its target attribute set to _blank.

In jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

Whenever that link is clicked, it will download the file in a new tab/window.

Download Data Url File