导出HTML表格到Excel时如何自定义设置下载文件名？

原代码通过window.location.href直接跳转base64格式的Excel数据URI，这种触发下载的方式不支持自定义文件名，浏览器会统一使用默认名download。

改用动态创建<a>下载标签的方式触发下载，利用HTML5新增的download属性指定自定义文件名，同时给导出方法新增文件名入参，不破坏原有调用逻辑。

修改后完整代码 #

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
  return function(table, sheetName, fileName) {
    if (!table.nodeType) table = document.getElementById(table)
    // 配置默认值
    const finalSheetName = sheetName || 'Worksheet'
    const finalFileName = fileName || '导出数据'
    var ctx = {worksheet: finalSheetName, table: table.innerHTML}
    // 动态创建a标签触发自定义文件名下载
    const downloadLink = document.createElement('a')
    downloadLink.href = uri + base64(format(template, ctx))
    downloadLink.download = `${finalFileName}.xls`
    // 兼容浏览器触发逻辑
    document.body.appendChild(downloadLink)
    downloadLink.click()
    document.body.removeChild(downloadLink)
  }
})()

调用示例 #

调用时传入第三个参数即可指定自定义文件名：

// 示例：导出id为orderTable的表格，工作表名为"订单明细"，导出文件名为"2024年Q1订单报表"
tableToExcel('orderTable', '订单明细', '2024年Q1订单报表')

// 原有双参数调用逻辑不受影响，未传文件名时会使用默认名"导出数据.xls"
// tableToExcel('orderTable', '订单明细')

• download属性对当前使用的data URI资源完全生效，无需额外处理跨域问题
• 代码已自动拼接.xls后缀，调用时直接传文件名主体即可，避免漏写后缀导致文件无法被Excel识别
• 该方案兼容Chrome、Edge、Firefox、Safari 10.1+等所有主流现代浏览器，无需引入第三方依赖

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