导入本地excel表格
2018-12-02 本文已影响0人
秉持本心
FileReader
FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件
创建实例
var reader = new FileReader();
方法
| 方法定义 | 描述 |
|---|---|
| abort() | 终止文件读取操作 |
| readAsArrayBuffer(file) | 异步按字节读取文件内容，结果用ArrayBuffer对象表示 |
| readAsBinaryString(file) | 异步按字节读取文件内容，结果为文件的二进制串 |
| readAsDataURL(file) | 异步读取文件内容，结果用data:url的字符串形式表示 |
| readAsText(file,encoding) | 异步按字符读取文件内容，结果用字符串形式表示，encoding缺省值为'UTF-8' |
事件
| 事件名称 | 描述 |
|---|---|
| onabort | 当读取操作被中止时调用 |
| onerror | 当读取操作发生错误时调用 |
| onload | 当读取操作成功完成时调用 |
| onloadend | 当读取操作完成时调用,不管是成功还是失败 |
| onloadstart | 当读取操作将要开始之前调用 |
| onprogress | 在读取数据过程中周期性调用 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入Excel</title>
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
</head>
<body>
<input type="file" onchange="importExcel(this)" />
<div id="demo"></div>
<script>
var wb; // 定义一个变量为读取完成的数据
var rABS = false; // 是否将文件读取为二进制字符串
// 导入函数
function importExcel(event) {
if(!event.files) {
return;
}
// 这里可以自定义控制导入文件大小
const IMPORTFILE_MAXSIZE = 1*1024;
// 截取到导入文件名的后缀
var suffix = event.files[0].name.split(".")[1];
// 判断导入文件类型
if(suffix != 'xls' && suffix !='xlsx'){
alert('导入的文件格式不正确!')
return
}
// 判断导入文件大小
if(event.files[0].size/1024 > IMPORTFILE_MAXSIZE){
alert('导入的表格文件不能大于1M')
return
}
var obj = event.files[0];
// 实例一个FileReader对象将文件内容读入内存
var reader = new FileReader();
// 读取成功的回调函数
reader.onload = function(e) {
var data = e.target.result;
if (rABS) {
// 手动转化二进制
wb = XLSX.read(btoa(fixdata(data)), {
type: 'base64'
});
} else {
// 自动转化二进制
wb = XLSX.read(data, {
type: 'binary'
});
}
// wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
// wb.Sheets[Sheet名]获取第一个Sheet的数据
document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
};
if (rABS) {
reader.readAsArrayBuffer(obj);
} else {
reader.readAsBinaryString(obj);
}
}
// 文件流转BinaryString
function fixdata(data) {
var o = "",
l = 0,
w = 10240;
for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
</script>
</body>
</html>
