Generate CSV , EXCEL file dynamique with lightning web component

Question

I have a problem with my code , I want to generate a file ( CSV / XLS ) , but with my code I get nothing , I don't now what is the problem .

Some help please .

  <a target="_self" class="slds-button"  href={hrefdata}
                    download={fileName}
                      onclick={downloadCSVFile} 
                    style="margin-left: 1%;">

==> JS :

 downloadCSVFile(event) {
        console.log('teste file');

        var DetailSets = this.DetailSets;
        var data = [];
        var headerArray = [];
        var csvContentArray = [];


        //Fill out the Header of CSV
        //headerArray.push(' ');
        var regExpr = /[&\/\\#°]/g;
        var delivery = Delivery;
        var deliveryCnt = delivery.replace(regExpr, ".");
        headerArray.push(Cnt);
        headerArray.push(date);
        headerArray.push(Amount);
        data.push(headerArray.join("\t")); 

        for (var i = 0; i < DetailSets.length; i++) { 
            var tempArray = []; 
            tempArray.push(DetailSets[i].Vbln__c);
            tempArray.push(DetailSets[i].Eat__c);
            tempArray.push(DetailSets[i].Amt__c);
            //console.log("tempArray.join() : " + tempArray.join("\t")); 
            data.push(tempArray.join("\t")); 
        }

        var dataString = data.join("\n"); 

        var csvContent = dataString;

    
        var Name = this.Name;
        var fileName = "Export " + Name;
       
        fileName = fileName.replace(/ /g, "_");
        fileName += ".xls";
        var uri = 'data:text/xls;charset=utf-8,' + encodeURIComponent(csvContent);

        if (navigator.msSaveBlob) { // IE 10+
            var blob = new Blob([csvContent], { type: "text/xls;charset=utf-8;" });
            navigator.msSaveBlob(blob, fileName);
        }
        else {
           
            var link = document.createElement("a");

           
            link.setAttribute('download', fileName);
            link.href = uri;

         
            link.style = "visibility:hidden";

            link.click();

        }
    }

Answer 1

First of all, you're using tabs instead of commas, so this is a TSV (Tab-Separated Values) file, not a CSV (Comma-Separated Values) file. This may cause problems in Excel and other programs trying to read the file. Second, Cnt, date, and Amount appear to be undefined. Unless you need the performance increase, consider using the more legible Array.prototype.map method. You also have some unused variables in your code. Finally, don't use text/xls, as that isn't a valid mime type. Declaring the file as a CSV should open Excel (or whatever spreadsheet app is installed for CSV). Assuming that the variables are declared elsewhere, here's a more legible version of your code:

  downloadCSVFile() {
    const csv = [
      { Vlbn__c: Cnt, Eat__c: date, Amt__c: Amount }, // Field Headers
      ...this.DetailSets, // Record Rows
    ]
      .map((row) => [row.Vlbn__c, row.Eat__c, row.Amt__c].join(",")) // convert to CSV record
      .join("\n"); // and join all records together
    var fileName = `Export ${this.Name}.xls`.replace(" ", "_");
    var uri = `data:text/xls;charset=utf-8,${encodeURIComponent(csvContent)}`;
    if (navigator.msSaveBlob) {
      // IE 10+
      var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
      navigator.msSaveBlob(blob, fileName);
    } else {
      var link = document.createElement("a");
      link.setAttribute("download", fileName);
      link.href = uri;
      link.style = "visibility:hidden";
      link.click();
    }
  }