Follow Below steps to Export PHP JSON data to Excel file using JavaScript/JQuery:
- Copy below code and use it in PHP file. It will work.
<?php
$data = array(
'0' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'mohdramzaan112@gmail.com', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
'1' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'mohdramzaan112@gmail.com', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
'2' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'mohdramzaan112@gmail.com', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
'3' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'mohdramzaan112@gmail.com', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
'4' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'mohdramzaan112@gmail.com', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
'5' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'mohdramzaan112@gmail.com', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001')
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel export</title>
<style>
.export-data-block {
padding-top: 50px;
text-align: center;
font-family: sans-serif;
}
.export-data-block form button {
font-size: 25px;
background: yellow;
padding: 7px 21px;
}
</style>
</head>
<body>
<div>
<h1>Export PHP JSON Data to Excel using JavaScript</h1>
<form action="#" method="post" id="export-excel">
<input type="hidden" value='<?php echo json_encode($data); ?>' name="exportData" id="export-data">
<button type="submit" value="export" name="export">Export</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#export-excel').on('submit', function(e) {
e.preventDefault();
let data = $("#export-data").val();
if(data == '')
return;
JSONToCSVConvertor(data, "Exported Data", true);
});
});
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//Set Report title in first row or line
CSV += ReportTitle + 'rnn';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + 'rn';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + 'rn';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
