文件名含点号时CSV下载功能的扩展名异常问题

我太懂你这种纠结了——明明文件是CSV格式，就因为文件名里带了个点，浏览器就硬把最后一段当成扩展名，完全不管我们设置的MIME类型！除了你说的直接加.csv后缀的方法，这里还有几个实用的解决方案：

• 写个小工具自动补全扩展名
  不想每次手动拼文件名？搞个简单的函数自动处理就行——判断下文件名是不是已经以.csv结尾，没有的话就自动加上。这样原文件名里的点号能保留，扩展名也不会错。代码示例：

  const setCsvFilename = (link, filename) => {
    link.download = filename.endsWith('.csv') ? filename : `${filename}.csv`;
  };
  
  // 用的时候直接传就行
  setCsvFilename(link, "aa.bb");
  

• 旧浏览器兼容备选：用navigator.msSaveBlob
  要是你的项目还要兼容IE或者老版Edge，可以试试navigator.msSaveBlob这个方法。它在处理带点的文件名时，会更看重我们设置的MIME类型，不过现在大部分现代浏览器都支持标准的a标签下载了，这个就当是个兜底方案吧：

  const csvData = new Blob(
    [[].map(row => row.join(",")).join("\n")],
    { type: "text/csv;charset=utf-8;" }
  );
  
  if (navigator.msSaveBlob) {
    // IE/老Edge下直接传文件名，它会根据MIME类型识别CSV
    navigator.msSaveBlob(csvData, "aa.bb");
  } else {
    const link = document.createElement("a");
    link.href = window.URL.createObjectURL(csvData);
    setCsvFilename(link, "aa.bb"); // 用上刚才的工具函数
    link.click();
    window.URL.revokeObjectURL(link.href); // 记得释放URL对象
  }
  

• 不推荐的偏门技巧：给文件名加尾点
  如果你铁了心不想让文件名带.csv后缀，还有个操作——把文件名设成"aa.bb."（最后加个点），有些浏览器会忽略这个尾点，把前面的aa.bb当成文件名，再根据MIME类型给文件加上.csv扩展名。不过这个方法兼容性很差，不同系统的文件管理器反应不一样，生产环境真的不建议用，就当涨个见识吧。

总的来说，最靠谱的还是自动补全扩展名的方法，简单还能保证跨浏览器都没问题，其他方法要么是给老环境兜底的，要么就是偏门技巧风险高。

备注：内容来源于stack exchange，提问作者foxiris