时间戳

首页 > 解决方案 > 从 HTML 表格下载 CSV

html - 从 HTML 表格下载 CSV

问题描述

这是一个自我回答的问题。

如何<table>在浏览器中将 HTML 下载为 CSV？假设 HTML 表在实际数据中不包含逗号。

这是我的 HTML 表格：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

我不关心旧浏览器，只关心完全支持 ES6 的现代浏览器。

标签： htmlcsvecmascript-6

解决方案

只需遍历 HTML 行tr，用逗号连接列，,用换行符连接行/n。

然后遍历 HTML 标头th，用逗号连接每个标头,。

然后使用换行符连接标题字符串和行字符串/n。

从那时起，只需<a>使用一组BlobCSV 字符串创建一个超链接并强制.click()它开始下载。

这是一个在 Chrome 68、FF 58、MacOS Safari 11 上运行良好的示例：

const tableToCSV = table => {
  const headers = Array.from(table.querySelectorAll('th'))
    .map(item => item.innerText).join(',')

  const rows = Array.from(table.querySelectorAll('tr'))
    .reduce((arr, domRow) => {
      if (domRow.querySelector('th')) return arr

      const cells = Array.from(domRow.querySelectorAll('td'))
        .map(item => item.innerText)
        .join(',')

      return arr.concat([cells])
    }, [])

  return headers + '\n' + rows.join('\n')
}

const downloadCSV = csv => {
  const csvFile = new Blob([csv], { type: 'text/csv' })
  const downloadLink =  document.createElement('a')

  downloadLink.download = `CSV-${new Date().toDateString()}.csv`
  downloadLink.href = window.URL.createObjectURL(csvFile)
  downloadLink.style.display = 'none'
  document.body.appendChild(downloadLink)

  downloadLink.click()
}

document.querySelector('button').addEventListener('click', () => {
  const table = document.querySelector('table')
  const csv = tableToCSV(table)
  
  return downloadCSV(csv)
})
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 15px;
  text-align: left;
}

table#t01 {
  width: 100%;    
  background-color: #f1f1c1;
}
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<button on-click="download()">Download CSV</button>

推荐阅读