Search code examples
jqueryexcelajaxxlsxreportgenerator

Download a excel file using jquery and ajax

I want to download the file in .xlsx format.Previously I have done this to download csv file. But now I need to change the file format to .xlsx. If I can convert to csv file to xlsx format using a library, it is also fine. There's a data just like

{"device_token":"ABC1234222","device_code":"1234567890","product_name":"DDDDD","domain_name":"SSS"}

So If I use comma(,) as a delimiter this data separated into parts. But I need to put this data into one cell. Anyway to do this.

enter image description here

I have added the code in below

if(response.result.tripDetails.length != 0 || response.result.requestedData.length != 0) {
                   let rows1 = [
                       ["Trip ID", "Trip", "Country", "Add Date Time GMT", "Add Date Time Local", "Remove Date Time GMT", "Remove Date Time Local","Create Date"]
                   ];
                   let rows2 = [
                       ["Request", "Local Time", "GMT Time", "Created Date"]
                   ];
                   response.result.tripDetails.forEach(function (locationTrackingTripData) {
                        let row = [locationTrackingTripData.tripId, locationTrackingTripData.trip, locationTrackingTripData.country, locationTrackingTripData.addDateTimeGMT, locationTrackingTripData.addDateTimeLocal, locationTrackingTripData.removeDateTimeGMT, locationTrackingTripData.removeDateTimeLocal, locationTrackingTripData.createdDate];
                                  rows1.push(row);
                   });
                   response.result.requestedData.forEach(function (locationTrackingRequestedData) {
                        let row = [locationTrackingRequestedData.request, locationTrackingRequestedData.localTime, locationTrackingRequestedData.GMTTime, locationTrackingRequestedData.createdDate];
                                  rows2.push(row);
                   });
                   let excelContent = "data:application/vnd.ms-excel" + rows1.map(e => e.join(",")).join("\n") +('\n\n')+ rows2.map(e => e.join(",")).join("\n");
                   var encodedUri = encodeURI(excelContent);
                   var link = document.createElement("a");
                   link.setAttribute("href", encodedUri);
                   link.setAttribute("download", "locationTrackingDetails.csv");
                   document.body.appendChild(link);
                   link.click();
        }

Hope your support to solve this.

Solution

  • I solved my issue. So think to share my answer.

    I replace the " from "\. I'm getting data as a dynamic one.

    var req = {"device_token":"ABC1234222","device_code":"1234567890","product_name":"DDDDD","domain_name":"SSS"}

let requestCol = "\"" + req.replace(/\"/g,'\"\"') + "\"";

    whole code

        if(response.result.tripDetails.length != 0 || response.result.requestedData.length != 0) {
                       let rows1 = [
                           ["Trip ID", "Trip", "Country", "Add Date Time GMT", "Add Date Time Local", "Remove Date Time GMT", "Remove Date Time Local","Create Date"]
                       ];
                       let rows2 = [
                           ["Request", "Local Time", "GMT Time", "Created Date"]
                       ];
                       response.result.tripDetails.forEach(function (locationTrackingTripData) {
                            let row = [locationTrackingTripData.tripId, locationTrackingTripData.trip, locationTrackingTripData.country, locationTrackingTripData.addDateTimeGMT, locationTrackingTripData.addDateTimeLocal, locationTrackingTripData.removeDateTimeGMT, locationTrackingTripData.removeDateTimeLocal, locationTrackingTripData.createdDate];
                                      rows1.push(row);
                       });
                       response.result.requestedData.forEach(function (locationTrackingRequestedData) {
                       let requestCol = "\"" + locationTrackingRequestedData.request.replace(/\"/g,'\"\"') + "\"";
                            let row = [requestCol, locationTrackingRequestedData.localTime, locationTrackingRequestedData.GMTTime, locationTrackingRequestedData.createdDate];
                                      rows2.push(row);
                       });
                       let excelContent = "data:application/vnd.ms-excel" + rows1.map(e => e.join(",")).join("\n") +('\n\n')+ rows2.map(e => e.join(",")).join("\n");
                       var encodedUri = encodeURI(excelContent);
                       var link = document.createElement("a");
                       link.setAttribute("href", encodedUri);
                       link.setAttribute("download", "locationTrackingDetails.xlsx");
                       document.body.appendChild(link);
                       link.click();
            }

    Instead of above way, We can use this method also. We can replace , from |. So we can get the whole line without breaking the formatting.

    let requestCol = req.replace(/\,/g,'|');

{"device_token":"ABC1234222"|"device_code":"1234567890"|"product_name":"DDDDD"|"domain_name":"SSS"}