jQuery导出CSV文件无扩展名：如何自定义导出文件名？

问题 #

我现在用table2CSV插件配合以下jQuery代码把HTML表格转换成CSV文件导出：

$(document).ready(function() { 
  $('table').each(function() { 
    var $table = $(this); 
    var $button = $('<button type="button">'); 
    $button.text("Export to spreadsheet"); 
    $button.insertAfter($table); 
    $button.click(function() { 
      var csv = $table.table2CSV({delivery:'value'}); 
      window.location.href = 'data:text/csv;charset=UTF-8,' + encodeURIComponent(csv); 
    }); 
  }); 
})

目前功能正常，但导出的文件默认名称是“download”，必须重命名成download.csv才能正常打开。请问有没有办法设置自定义的文件名？

解决方案 #

你当前用window.location.href的方式没法直接指定下载文件名——这种数据URL的方式浏览器默认就会用"download"作为文件名。要自定义文件名，我们可以改用Blob对象配合<a>标签的download属性来实现，这个属性能直接指定下载文件的名称，完美解决你的问题。

修改后的代码如下：

$(document).ready(function() { 
  $('table').each(function() { 
    var $table = $(this); 
    var $button = $('<button type="button">'); 
    $button.text("Export to spreadsheet"); 
    $button.insertAfter($table); 
    $button.click(function() { 
      var csv = $table.table2CSV({delivery:'value'});
      // 创建Blob对象，明确指定CSV的MIME类型
      var blob = new Blob([csv], { type: 'text/csv;charset=UTF-8;' });
      // 创建临时的<a>标签用于触发下载
      var downloadLink = document.createElement('a');
      // 生成Blob的临时URL
      var blobUrl = URL.createObjectURL(blob);
      
      // 这里设置你想要的自定义文件名，比如"my-table-data.csv"
      downloadLink.setAttribute('download', 'my-table-data.csv');
      downloadLink.setAttribute('href', blobUrl);
      
      // 把临时标签加入页面并触发点击
      document.body.appendChild(downloadLink);
      downloadLink.click();
      
      // 清理临时元素和Blob URL，避免内存占用
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(blobUrl);
    }); 
  }); 
})

额外优化：给每个表格设置专属文件名 #

如果页面上有多个表格，你可能希望每个表格导出的文件名不一样，比如用表格的ID、标题或者索引来区分，只需要修改download属性的赋值逻辑就行：

// 示例：用表格的ID作为文件名，如果没有ID就用默认名称
var customFileName = $table.attr('id') ? `${$table.attr('id')}.csv` : 'table-data.csv';
downloadLink.setAttribute('download', customFileName);

这样每个表格导出的文件就会有对应的专属名称，不用再手动重命名啦。

内容的提问来源于stack exchange，提问作者fightstarr20