前端JS生成报表，以及报表读取

前言

在做web的时候，经常会有一些报表功能，一般方式都是在后台生成文件，通过流传给前台，生成下载链接。
这种方式会占用一定的后台资源，而且，下载操作是双向的，必须等待用户下载之后操作才能完成。当然这个也是可以解决的，只要生成文件流，保存在前端就可以了。但是今天说的是另外一种方式，交互在前端完成，后台只负责提供数据。（转载请注明出处）

正文

这是该js的git连接，文档写的很清楚，在此感谢一下sheetjs的作者们对于人类伟大进步事业做出的杰出贡献。我这里写一些比较常用的代码，仅供参考。

读取

<input id="upload" type="file" onchange="upload(event)" />

<script>
function upload(event){
	var files = event.target.files, f = files[0];
    var reader = new FileReader();
    reader.onload = function (e) {        
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, {type: 'array'});

        var ws = workbook.Sheets[workbook.SheetNames[0]];
        //tableDAta即为读取到的数据。
        var tableData = XLSX.utils.sheet_to_json(ws)
   }
   reader.readAsArrayBuffer(f);
}
</script>

下载

<script>
function download(){
	//通过ajax获得list
	var ws_name = "表名";
    //新建workbook
    var wb = XLSX.utils.book_new();
    //写excel数据格式,按顺序来，这里知道表头，所以数组内置了
    var ws_data = [["列名1", "列名2", "列名3"]];
    //写表体
    for(var i in list){
      let item = [];
      //按顺序push
      item.push(list[i].列名1)
      item.push(list[i].列名2)
      item.push(list[i].列名3)
      ws_data.push(item)
    }
    //类型转换 大概是将数组转sheet格式
    var ws = XLSX.utils.aoa_to_sheet(ws_data);

    /* 将workbook 放入sheet */
    XLSX.utils.book_append_sheet(wb, ws, ws_name);
    //下载
    XLSX.writeFile(wb, '文件名.xlsx');
}
</script>

使用vue会更加方便简洁，具体格式方法希望各自操刀，不再赘述。再次感谢sheetjs的作者们为人类的伟大进步事业做出的杰出贡献