git地址:https://github.com/SheetJS/sheetjs#sheetjs-js-xlsx
可以查看更详细的官方文档
先在页面中写一个导入文件的地方,以功能为目的,先不要在意样式
再写个文件处理完点击输出的小button
然后再引入xlsx,想用jquery再引一个这个库
<input type="file" id="file1"><br>
<button style="margin-left: 250px;" id="submit">submit➡️</button><br>
<input type="file" id="file2">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
最后,就可以再创建个script,里面写你要实现的功能逻辑了
这里代码再进行一下划分
先讲input中传入文件该如何处理,首先进行个监测,使用jquery的change事件:当元素的值发生改变时,会发生 change 事件
然后里面的东西几乎全网一样,大致过程为
先获取到file信息,使用FileReader中FileReader.onload方法
【FileReader.onload方法详见文档所述:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload】
然后处理文件输入的元素数据,再进行二次处理将其赋值到persons中,至此文件内容便读取完成,格式为数组对象
$('#file1').change(function (e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function (ev) {
try {
var data = new Uint8Array(ev.target.result),
//一次处理数据
workbook = XLSX.read(data, {
type: 'array'
}),
persons = [];
} catch (e) {
console.log('文件类型不正确');
return;
}
//二次处理数据
let fromTo = '';
for (let sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
console.log(fromTo);
persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
break;
}
}
console.log(persons);
};
fileReader.readAsArrayBuffer(files[0]);
});
小封装,一个工厂模式函数,一共三个参数:
fileArr——传入的Excel数组对象
fileTitle——Excel头,也就是第一行内容
fileName——导出Excel的标题
因为是特定需求使用,封装的没那么灵活
function importExl(fileArr, fileTitle, fileName) {
fileArr.forEach(item => {
let _array = []
_array.push(item.filename)
_array.push(item.width)
_array.push(item.height)
_array.push(item.class)
_array.push(item.xmin)
_array.push(item.ymin)
_array.push(item.xmax)
_array.push(item.ymax)
fileTitle.push(_array)
})
const ws = XLSX.utils.aoa_to_sheet(fileTitle);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
return XLSX.writeFile(wb, `${fileName}.xlsx`);
}