JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<h1>The a download attribute</h1>

<p>Click on the image to download it:<p>
<a href="http://google.com/" download>
  <img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

<p><b>Note:</b> The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).</p>

</body>
</html>

JavaScript

$("a[download]").click(function(e) {
    e.preventDefault();
    $.ajax({
        url: "https://cors-anywhere.herokuapp.com/" + $(this).attr("href"),
        headers: {
            "X-Requested-With": "true"
        },
        success: function(data) {
            console.log("The data is:", data);

            var a = $('<a></a>');

            a.attr("href", window.URL.createObjectURL(new Blob([data], {
                type: 'text/plain'
            })));

            a.attr("download", "page.html");

            $("body").append(a);

            a[0].click();
        }
    });

});