需求来源
在做问卷系统的时候，最后需要导出数据，格式是 csv 格式。
本来的思路：使用后台写入一个文件，然后将该文件链接发送给前端，从而实现下载 csv。
但思来想去，总感觉这样子很 lou。因为我的服务器宽带只有 1M，如果在服务器上创建 csv 文件并且提供链接给前端下载的话，后台的负载会很高。
简单介绍 csv
csv 全称 Comma Separated Values，通过简单的逗号分隔实现 “表格”。我能体会到的好处就是，csv 能够直接被 excel 识别。
csv 重要规则
- 一行对一行
- 通过半角逗号分隔列，每一行的逗号都要对应。
- 不管是不是使用双引号括起来，如果内容中有双引号，那么都需要将双引号成对, 一个变两个。
- 文本内有逗号时，可以将逗号换成全角逗号，也可以将逗号用双引号包裹。
零碎的知识点
- MIME 类型 - HTTP | MDN (mozilla.org)
- Blob - Web API 接口参考 | MDN (mozilla.org)
- a 标签的 download 属性，指定了下载的文件名
- URL.createObjectURL(blob)
- URL.revokeObjectURL(href)
- UTF8 和 UTF8 with BOM
示例代码
<button>导出 CSV</button>
<script>
document.querySelector('button').onclick = () => {
const data = `姓名,年龄\n龙天,20\n王大发,89`
const aTag = document.createElement("a")
const blob = new Blob(['\uFEFF',data], {type: 'text/csv'})
aTag.download = `文件名.csv`
aTag.href = URL.createObjectURL(blob)
aTag.click()
URL.revokeObjectURL(aTag.href)
}
</script>
