一、原理
利用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>