生成csv文件并下载

逃离我推掉我的手 2023-08-17 15:44 163阅读 0赞

当一些数据需要导出到文件中并查看时，`CSV`或许是个不错的选择，`CSV`文件在本地可以通过Excel表格打开。

## 文件格式 ##

首先介绍一下CSV文件格式，CSV文件是纯文本文件，以逗号分割的方式存储表格数据。其文件内容格式如下：

name,sex,age
    jack,男,12

其通过Excel打开后效果如下：

## BOM ##

**BOM** —— Byte Order Mark，中文名译作`“字节顺序标记”`。这样如果接收者收到 FEFF，就表明这个字节流是 `Big-Endian`的；如果收到FFFE，就表明这个字节流是 `Little- Endian` 的。因此字符 `"Zero Width No-Break Space"` （“零宽无间断间隔”）又被称作 **BOM**。  
**UTF-8 不需要 BOM 来表明字节顺序，但可以用 BOM 来表明编码方式**。字符 “Zero Width No-Break Space” 的 UTF-8 编码是 EF BB BF。所以如果接收者收到以 EF BB BF 开头的字节流，就知道这是 UTF-8编码了。*Windows 就是使用 BOM 来标记文本文件的编码方式的*。

## 原理 ##

*  a标签的datasource功能 `<a href="data:text/csv;charset=utf-8,..."></a>`直接下载文件
 *  a标签的`download`属性，用以声明下载的文件名
 *  csv文件的BOM头，特别指出`\ufeff`是BOM头，可以让excel等识别出csv文件的编码。
 *  `encodeURIComponent()` 可把字符串作为 URI 组件进行编码，用于对csv文件的换行符`\n`进行转码

## demo ##

render() {
        const csvData = this.getCsvData();
        return (
            <a
                href={`data:text/csv;charset=utf-8,\ufeff${encodeURIComponent(csvData)}`}
                download={`${name}.csv`}
            > 下载 </a>
        )
    }
    
    getCsvData = () => {
        const data = [
            {
                name: 'Jack',
                sex: 'man'，
                age: 10
            },
            {
                name: 'Tim',
                sex: 'man'，
                age: 22
            },
        ];
        let headStr = 'name,sex,age\n';
        let dataStr = data.map((item) => {
            return `${item.name},${item.sex},${item.age}\n`;
        }).join('');
        return headStr + dataStr;
    }