This is an example script I use often to demo how to use ajax to fetch a file and force download using axios. This cript also uses jquery but only for the purpose of the click action but is not necessary. I've use this blob in react, vue, angular and plain vanilla javascript. Works well.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Upload Example</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="http://localhost/testscripts/javascript/ajax/jquery/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>Example.html</h1>
<hr />
<button id="clickButton">Click To Download Image File</button><br />
<input type="checkbox" id="forceDownload" /> <b>Force Download</b>
<p>
<b>Description:</b>The purpose of this file is to demostrate the usage of
download of a file with a blob using axios. When you click on the button
above, it triggers jquery to call a function that uses axios to make a
ajax call to the "../basic_php_upload_api/uploads/example.png" to
download. A new window is open with the blob of the actual png file.
</p>
<p>Select Force download to download the file in the browser</p>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
<a href="#">upgrade your browser</a> to improve your experience.
</p>
<![endif]-->
<script>
const fileName = "example.png";
const fileUrl = `../basic_php_upload_api/uploads/${fileName}`;
const headers = {
"Content-Type": "image/png",
responseType: "blob",
};
const forceDownload = () => {
let anchor = document.createElement("a");
anchor.href = fileUrl;
anchor.target = "_blank";
anchor.download = fileName;
anchor.click();
};
const getFile = () => {
axios.get(fileUrl, headers).then((response) => {
let imageFile = response.data;
//let blob = new Blob([response.data], { type: 'image/png' }),
blob_url = window.URL.createObjectURL(response.data);
window.open(blob_url, "_blank");
if ($("#forceDownload").is(":checked")) {
//alert("forceDownload checked");
forceDownload();
}
// alert('axios started')
//console.log(response.data);
/*
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
*/
});
};
$("#clickButton").on("click", function () {
//alert('jquery started')
getFile();
});
</script>
</body>
</html>