Firefox浏览器中CSV文件重复下载问题求助（Chrome正常）

AI 小北

2026-8-17

解决Firefox中CSV下载两次的问题

你的代码在Firefox里触发两次下载，核心原因是同时调用了window.open(encodedUri)和a标签的click()方法：

Chrome对window.open(dataURI)的处理是打开新标签后自动关闭，不会触发下载
Firefox会直接将这个data URI作为下载请求，加上后面a标签的点击，就产生了两次下载——其中window.open触发的下载没有指定文件名，所以显示为随机文本名称

修复方案

直接移除多余的window.open(encodedUri)代码，同时优化DOM节点清理，避免创建的a标签残留：

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

      csvData.forEach(rowArray => {
          const row = rowArray.join(",");
          csvContent += row + "\r\n";
      });
      
      const encodedUri = "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURIComponent(csvContent);
      const link = document.createElement("a");
      link.href = encodedUri;
      link.download = "Dashy-Dash-Order-Guide.csv";
      document.body.appendChild(link);

      link.click();
      // 点击后移除DOM中的a标签，避免冗余节点
      document.body.removeChild(link);
    }
  };