How to Export JSON data to Excel File using JavaScript ?

Follow Below steps to Export PHP JSON data to Excel file using JavaScript/JQuery:

  1. Copy below code and use it in PHP file. It will work.
$data = array(
    '0' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
    '1' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
    '2' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
    '3' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
    '4' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001'),
    '5' => array('tx'=> '12121', 'type' =>'Giftcard', 'sender'=>'', 'receiver'=>'Marco', 'value'=>'100', 'note'=>'1001')
<!DOCTYPE html>
<html lang="en">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Excel export</title>
            .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;
            <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>
        <script src=""></script>
                $('#export-excel').on('submit', function(e) {
                    let data = $("#export-data").val();
                    if(data == '')
                    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");
                //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>>;
                // 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
       = "visibility:hidden";
       = fileName + ".csv";
                //this part will append the anchor tag and remove it after automatic click