JS处理数据生成Excel表格

发表于 | 分类于 | |

JS原生生成表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function toExcel() {

    //  列标题，逗号隔开，每一个逗号就是隔开一个单元格
    let str = `标题1, 标题2, 标题3, 标题4\n`;

    //  增加\t为了不让表格显示科学计数法或者其他格式
    let data = `内容1,内容2,内容2,内容4\t,\n内容4, 内容5,内容6,内容7\t,\n内容4,`
    str += data

    //  encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);

    window.location.href = uri

    // //  通过创建a标签实现
    // let link = document.createElement('a');
    // link.href = uri;
    // link.download = '测试.csv';
    // document.body.appendChild(link);
    // link.click();
    // document.body.removeChild(link);
}

这种实现方式简单，但是有一些弊端如：
单元格之间用逗号分隔容易造成乱码，可以通过 .replace(/,/g, ‘，’) 替换成中文逗号，关键字\t\n也会造成一些问题需要解决，但能够快速生成表格解决燃眉之急

使用工具生成

  • jQuery内有类似函数生成表格
  • SheetJS 生成表格

主要介绍SheetJS 生成表格方法。 sheetjs官网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//  npm install xlsx 安装工具

import xlsx from 'xlsx'
function toExcel() {
    //  文件名称
    let filename = '测试.xlsx';

    //  数据需要转化成二维数组
    let data = [['表头1', '表头2', '表头3'], ['数据1', '数据2', '数据3']];

    //Excel第一个sheet的名称 
    let ws_name = "Sheet1";

    //  创建工作薄对象
    let wb = xlsx.utils.book_new();

    //  向工作簿追加一个工作表
    let ws = xlsx.utils.aoa_to_sheet(data);

    //  添加数据
    xlsx.utils.book_append_sheet(wb, ws, ws_name);

    //  导出Excel
    xlsx.writeFile(wb, filename);
}