This is an example script where you can use a php file to force download an image file using the javascript blob and axios.
index.html
<!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 fileName = "example-download.php";
const fileUrl = `http://localhost/_api/basic_php_upload_api_download_example/${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>
example.download.php
<!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 fileName = "example-download.php";
const fileUrl = `http://localhost/_api/basic_php_upload_api_download_example/${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>