下载安装插件
npm install xlsx or yarn add xlsx
此时，在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖。
文件基础
获取文件对象
我比较推荐使用h5的原生文件上传项
<input type="file" id="uploadExcel" multiple />
其中multiple属性允许上传多个文件，通过Ctrl按键来实现。
在选择文件的过程中，触发事件的流程是下面这样的：
- mousedown
- focus
- mouseup
- click
- blur
- focus
- change
首先触发的是鼠标按下事件，然后就是焦点到了input上面，然后鼠标抬起事件，触发click事件，失去焦点以后弹出文件选择框，选中文件以后触发焦点，最后触发change事件。
所以监听input的文件内容变更事件的话，我推荐用change事件去监听。
添加事件监听：
window.document.getElementdById("uploadExcel").addEventListener("change", function(e){
let fileList = e.target.files;
})其中，打印fileList信息，可以发现fileList是一个类数组，由传入的file对象组成。每个file对象包含一下属性：
lastModified | Number | 表示最近一次的修改时间的时间戳 |
lastModeifiedDate | Object | 表示最后一次修改时间的Date对象，可以在其中调用Date对象的有关方法。 |
name | 文件上传时的文件名 | |
size | 文件的字节大小 | |
type | String | 文件的MIME类型 |
weblitRelativePath | 当在input上添加webkitdirectory属性时，可选文件夹，此时weblitRelativePath表示文件夹中文件的相对路径。未加时为空 | |
读取文件数据
首先创建一个FileReader实例：
let reader = new FileReader();
FileReader提供了如下方法：
readAsArrayBuffer(file) | 将文件读取为ArrayBuffer对象 |
readAsDataURL(file) | 将文件读取为DataURL，因此可以读取图片。 |
readAsText(file, encoding) | 将文件读取为文本，第二个参数是文本的编码方式，默认为utf-8 |
abort() | 终止文件读取操作 |
注：无论读取成功或失败，方法并不会返回读取结果，这一结果存储都在result属性中。 | |
FileReader事件：
onabort | 当读取操作被终止时调用 |
onerror | 当读取操作发生错误时调用 |
onload | 当读取操作成功完成时调用 |
onloaded | 当读取操作完成时调用，无论成功或失败 |
onloadstart | 当读取操作开始时调用 |
onprogress | 在读取数据过程中周期性调用 |
我们使用readAsDataURL(file)来读取文件数据，并使用onload事件来输出读取成功后result中的数据：
reader.onload = function(e){
let data = e.target.result;
};
reader.readAsDataURL(file);读取Excel
通过xlsx获取workbook
读取excel主要是通过以下语句实现：
XLSX.read(data, { type: type });返回一个叫WordBook的对象。
其中，这里type的类型要与处理文件时读的data一致，FileReader方法对应的type取值如下：
base64 | 以base64方法读取 |
binary | BinatyString格式(byte n is data.charCodeAt (n)) |
string | UTF-8编码的字符串 |
buffer | nodejs Buffer |
array | Uint8Array，8位无符号数组 |
file | 文件的路径(仅nodejs下支持) |
所以，全部代码如下：
let wb; // 读取完成的数据
let rABS = false; // 是否将文件读取为二进制字符串
document.getElementById("excel").addEventListener("change",function (e) {
if(!e.target.files) return;
var f = e.target.files[0];
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(f);}
else {reader.readAsBinaryString(f);}
});
function fixdata(data) { //文件流转BinaryString
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;
}WorkBook介绍
SheetNames保存了所有Sheet的名字
Sheets保存了每个Sheet的具体内容
Sheet Object
每个sheet Object表示一张表格，通过类似A1这样的键值保存每个单元格的内容。只要不是"!"开头的都表示普通的cell。特殊cell有：
sheet['!ref'] | 表示所有单元格的范围，例如A1到F8则记录为A1: F8 |
sheet[!merges] | 存放单元格合并信息，是一个数组。每个数组由包含s和e构成的对象组成。s表示start，e表示end，r表示row，c表示col。 |
例如：
sheet1:{
!merge: [
{
e: { c: 5, r: 0 },
s: { c: 0, r: 0 } // 表示A1到F1单元格合并
},
{
e: { c: 5, r: 9 },
s: { c: 0, r: 9 } // 表示A10到F10单元格合并
}
]
}Cell Object
t | 内容类型 | s | String |
n | Number | ||
b | Boolean | ||
d | Date | ||
v | 原始值 |
|
|
f | 公式 | 如：B2 + B3 | |
h | HTML内容 |
|
|
w | 格式化后的内容 |
|
|
r | 富文本内容 |
|
|
...... |
|
| |
读取WorkBook
普通方法：
// 读取 excel文件
function outputWorkbook(workbook) {
var sheetNames = workbook.SheetNames; // 工作表名称集合
sheetNames.forEach(name => {
var worksheet = Workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
for(var key in worksheet) { // v是读取单元格的原始值
console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
}
});
}根据!ref确定excel的范围，再根据!merges确定单元格合并，最后输出整个table。插件zi'shen已经写好工具类XLSX.utils给我们用：
sheet_to_html | 转csv会忽略格式、单元格合并等信息 |
sheet_to_txt |
|
sheet_to_csv | 会保留单元格合并，但是生成的是HTML代码，不是<table> |
sheet_to_json |
|
sheet_to_formulae |
|
导出Excel
生成sheet
aoa_to_sheet | 将一个二维数组转成sheet |
json_to_sheet | 将由对象组成的数组转化成sheet |
table_to_sheet | 将table的dom直接转成sheet |
sheet_add_aoa | 将二维数组添加到现有工作表中 |
sheet_add_json | 将js对象数组添加到现有工作表中 |
- format_cell 生成单元格的文本值(使用数字格式)
- encode_row / decode_row 在0索引行和1索引行之间转换
- encode_col / decode_col 在0索引的列和列名之间转换
- encode_cell / decode_cell 转换单元格地址
- encode_range / decode_range 转换单元格范围
总结
到此这篇关于js使用xlsx读取excel文件的文章就介绍到这了,更多相关js用xlsx读取excel内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
