首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >从HTML表下载CSV

从HTML表下载CSV
EN

Stack Overflow用户
提问于 2018-08-19 07:53:49
回答 1查看 1.3K关注 0票数 2

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

如何在浏览器中以<table>格式下载HTML?假设HTML表的实际数据中不包含逗号。

这是我的HTML表:

代码语言:javascript
复制
<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的现代浏览器。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-19 07:53:49

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

然后循环遍历headers th,并用逗号,将它们连接起来。

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

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

下面是一个在Chrome68,FF 58,MacOS Safari11上运行良好的例子:

代码语言:javascript
复制
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)
})
代码语言:javascript
复制
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

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

table#t01 {
  width: 100%;    
  background-color: #f1f1c1;
}
代码语言:javascript
复制
<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>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51913381

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档