Pass CSV file data from suitelet and create the csv file in the html page

Scenario:

We have a html page, which contains a generate report button.

On clicking the button, the csv file should be downloaded.

From the html page we are passing the values to the suitelet. From the suitelt the response data is returning to the html page.

Solution:

HTML:

function call on button click:

  var responseData = await response.json();
           
                
                if (responseData.success) {
                    console.log('responseData',responseData)
                    console.log('responseData',responseData.csvContent)
                    this.exportCsv(responseData.csvContent);
                  // this.exportCsv(responseData.reportURL);
                   
                } 

exportCsv(reportData) {
          
    const csvContent = `data:text/csv;charset=utf-8,${encodeURIComponent(reportData)}`;
    console.log('csvContent', csvContent);


    const link = document.createElement('a');
    link.setAttribute('href', csvContent);
    link.setAttribute('download', 'data.csv');


    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

           },

Suitelet:

   if (context.request.method === "POST") {


  var csvContent = 'Month-Year,Program,PO #,Billing type,Employee ID,Employee Name,Designation,Available Hours,Billed Hours,Invoice Currency,Invoice Rate,Invoice Value,Acsia Rate ($),Acsia Cost ($),Acsia Direct Cost ($),Customer Rate ($),Expected Revenue ($),Calculated Cost ($),Calculated Direct Cost ($),Actual Revenue ($),Gross Margin ($),Margin ($),Margin (%),Revenue Leakage ($),Resource Utilization (%),Actual RPE/Hr ($),Expected RPE/Hr ($),Direct CPE/Hr ($),CPE/Hr ($)n';

                  for(var i=0;i<combinedResult.length;i++){

                //Looping through the search results

                   csvContent += combinedResult[i].monthYr + ',' + combinedResult[i].program + ',' + combinedResult[i].poNum + ',' + combinedResult[i].billingType + ',' + combinedResult[i].empId  + ',' + combinedResult[i].empName + ',' + combinedResult[i].designation +  ',' + combinedResult[i].availHrs +  ',' + combinedResult[i].billHrs +  ',' + combinedResult[i].invCurr +  ',' + combinedResult[i].invRate + ',' + combinedResult[i].invValue + ',' + combinedResult[i].acsRate + ',' + combinedResult[i].acsCost + ',' + combinedResult[i].acsDirCost + ',' + combinedResult[i].cusRate + ',' + combinedResult[i].expRev + ',' + combinedResult[i].calCost + ',' + combinedResult[i].calDirCost + ',' + combinedResult[i].actRevenue + ',' + combinedResult[i].grossMargin + ',' + combinedResult[i].margin + ',' + combinedResult[i].marginPerc + ',' + combinedResult[i].revLeak + ',' + combinedResult[i].resUtil + ',' + combinedResult[i].actualRpe + ',' + combinedResult[i].expRpe + ',' + combinedResult[i].dirCpe + ',' + combinedResult[i].cpeHr + 'n';
                   }

   var response = {
                        success: true,
                        kpiData: kpiData,
                        reportURL:reportURL,
                        csvContent:csvContent
                        


                    };