js读取本地文本文件，并生成Excel文件

一、原理

利用js中FileReader对象读取文件（FileReader是一种异步读取文件机制）

1. 创建fileReader对象
2. fileReader对象读取不同文件调用的方法不同，所以要创建正则判断读取文件类型

FileReader提供了如下方法：

1、readAsArrayBuffer(file)：按字节读取文件内容，结果用ArrayBuffer对象表示。

该方法读取文件后，会在内存中创建一个ArrayBuffer对象（二进制缓冲区），将二进制数据存放在其中。通过此方式，可以直接在网络中传输二进制内容。

  var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function () {console.log(this.result);console.log(new Blob([this.result]))}

2、readAsBinaryString(file)：按字节读取文件内容，结果为文件的二进制串

该方法会读取指定的 Blob 或 File 对象,当读取完成的时候，readyState 状态会变成DONE（已完成），并触发 loadend (en-US) 事件，同时 result 属性将包含所读取文件原始二进制格式。

3、readAsDataURL(file)：读取文件内容，结果用data:url的字符串形式表示

该方法会读取指定的 Blob 或 File 对象。并生成data URl(base64编码)。

4、readAsText(file,encoding)：按字符读取文件内容，结果用字符串形式表示

该方法可以用来读取文本文件，这个文件有两个参数，第一个参数用来读取File对象或Blob对象。第二个参数用来指定文件的编码，这是个可选参数，默认值为国际通用的UTF-8编码格式。

5、abort()：终止文件读取操作。

该方法可以终止任何操作，在读取大文件的时候，这个方法能派上用场。

`readAsText读取TXT文本文件乱码问题：`

之前有过用默认编码方式进行读取TXT文件，会出现中文乱码，把reader.readAsText(file,'编码')的编码方式改为'gb2312’就不乱码了。

FileReader事件：

onloadstart：读取文件开始时触发
onprogress：读取过程中触发，会返还本次读取文件的最大字节数和已经读取完毕的字节数，可以用来做进度条
onabort：在读取中断时触发
onerror：在读取文件失败时触发
onload：在读取完成时触发
onloadend：读取结束后触发，不论成功还是失败都会触发，触发时机在onload之后

提示：因为FileReader的操作都是异步的，所以对有些需要同步获取数据的不能实现。可以用promise队列来解决异步问题。

二、案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>上传文件，导出excel文件</title>
</head>
<body><h1 style="font-size: 20px; color: red;">使用a标签方式将json导出为csv文件</h1><input type="file" id="onloadFile"/><button onclick='tableToExcel()'>导出</button><script>let dateArr = []; // 日期数组let xx = []; // json数据数组// 正则表达式var reg = /(.csv|.txt|.log)$/m;var reg2 = /(.mp4)$/m;var reg3 = /(.jp[e]?g|.png)$/m;var reg4 = /(.mp3)$/m;// 获取上传标签对象const input = document.getElementById('onloadFile')input.addEventListener('change', e => {// 创建fileReader对象const reader = new FileReader();// input.files[0] 为第一个文件const file = e.target.files[0]; console.log(file.name)// 如果读取文本文件类型需要使用file对象中的readAsTest方法，并设置文字类型为utf-8类型if(reg.test(file.name)) {reader.readAsText(input.files[0], 'utf8')}// 如果读取图片视频音频这种流体文件，需要调用file对象的readAsDataUrl，该方法会将内容转换为base64类型if(reg2.test(file.name) || reg3.test(file.name) || reg4.test(file.name)) {reader.readAsDataURL(input.files[0])}// 读取文件对象reader.onload = e => {// 如果是文本对象if(reg.test(file.name)) {// e.target.result  为获取结果const xxx = e.target.result;console.log(e.target.result)// 处理获取到的文本信息dateArr = xxx.match(/^(2023)\S*/igm)console.log(dateArr)let xx2 = xxx.replace(/^(2023).*(HttpUtils)([^:]*):/igm, ',')let xx3 = xx2.replace(/^,/g, ' ')let xx4 = xx3.replace(/(\/n)/g, '')xx = JSON.parse('['+ xx4 +']')console.log(xx)}}})// 导出excel文件的方法const tableToExcel = () => {// 要导出的json数据const jsonData = xx// 列标题，逗号隔开，每一个逗号就是隔开一个单元格let str = `姓名,问题,答案,日期\n`;// 增加\t为了不让表格显示科学计数法或者其他格式for(let i = 0 ; i < jsonData.length ; i++ ){str += `${(i+1) + ' 、' + jsonData[i].user_id+'\t'},`;for(let j = 0; j < jsonData[i].history_turns.length; j++) {if(j !== 0){str+=`${''+'\t'},`}for(const key in jsonData[i].history_turns[j]) {str += `${jsonData[i].history_turns[j][key] + '\t'},`;   }if(j !== 0) {str+=`${''+'\t'},`} else {str += new Date(dateArr[i]).toLocaleString()+'\t'}str+='\n';}str+='\n';}// encodeURIComponent解决中文乱码const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);// 通过创建a标签实现const link = document.createElement("a");link.href = uri;// 对下载的文件命名link.download =  "用户数据表"+new Date().toLocaleDateString()+".csv";link.click();}</script>
</body>
</html>