I created a function that downloads the CSV file, The function works fine in chrome but when I download the file in firefox the file is downloaded twice, one file with the name provided and the other with random text

const handleDownloadClick = async () => {  
    const csv = orderGuideData.map((item: any) => {
      return [
        user?.business?.name,
        item.item,
        item.ddCategory1 ? item.ddCategory1:"", 
        item.ddCategory2 ? item.ddCategory2:"", 
        item.supplier.replace(/,/g, " "),
        item.quantity ? item.quantity.toFixed(2) : 0,
        item.unitPrice ? item.unitPrice.toFixed(2) : 0,
        item.tot ? item.tot : 0,
      ];
    });
    if (csv) { const csvData = [["Business","ITEM","DASHY CATEGORY 1","DASHY CATEGORY 2", "DISTRIBUTOR", "QTY", "COST", "TOTAL"]].concat(csv);
      const rows = csvData;
      let csvContent = "";

      rows.forEach(function(rowArray) {
          let row = rowArray.join(",");
          csvContent  = row   "\r\n";
      });
      
      var encodedUri = "data:text/csv;charset=utf-8,"   encodeURIComponent(csvContent);
      window.open(encodedUri);
      var link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", "Dashy-Dash-Order-Guide.csv");
      document.body.appendChild(link);

      link.click();
    }
  };

CodePudding user response：

You already set up href attribute for link and then you call link.click()

So why do you do window.open(encodedUri); also?