<!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.0">
<title>Document</title>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
<input type="file" name="xlfile" id="xlf" accept=".xlsx,.xls" />
<div id="htmlout"></div>
<script>
// 实例化对象
var X = XLSX;
// 渲染函数
/*
* param:
* workbook sheet.js 读取后转化的对象
*/
var process_wb = (function () {
var HTMLOUT = document.getElementById('htmlout');
var to_html = function to_html(workbook) {
HTMLOUT.innerHTML = "";
workbook.SheetNames.forEach(function (sheetName) {
// sheet.js 输出html
var htmlstr = X.write(workbook, { sheet: sheetName, type: 'string', bookType: 'html' });
HTMLOUT.innerHTML += htmlstr;
});
return "";
};
return function process_wb(wb) {
to_html(wb);
};
})();
// 处理file文件流
/*
* param:
* files 文件流
*/
var do_file = (function () {
return function do_file(files) {
// 上传的excel文件流
var f = files[0];
var reader = new FileReader();
reader.onload = function (e) {
// ArrayBuffer 二进制对象
var data = e.target.result;
process_wb(X.read(data, { type: 'array' }));
};
reader.readAsArrayBuffer(f);
};
})();
(function () {
// 获取按钮对象
var xlf = document.getElementById('xlf');
if (!xlf.addEventListener) return;
function handleFile(e) {
console.log(e);
do_file(e.target.files);
}
// 监听上传 文件事件
xlf.addEventListener('change', handleFile, false);
})();
</script>
</body>
</html>
06-12