背景:
本来是打算使用ActiveXObject来处理Excel,后面发现谷歌浏览器居然用不了这个对象;也怪我才疏学浅,百度了之后发现这玩意是IE的一个黑科技,其它浏览器居然用不了?!。所以采用xlsx.full.min.js插件来处理这类问题。(简书.YZJGOOD原创文章,转载请注明出处)
导入(需要xlsx.full.min.js):
html:
<!--by yzjgood 前台按钮-->
<div class="button_su" id="zhuangzai">
<a href="#" class="button_su_inner">
<span class="button_text_container">
装载数据
</span>
</a>
</div>
<input id="zhenzhuangzai" type="file" onchange="impexcel(this)" style="display: none;" />
JS:
// by yzjgood 通过JQuery获取元素触发函数
$(function(){
$("#zhuangzai").click(function(){
$("#zhenzhuangzai").trigger("click");
});
});
var wb;// 读取完成的数据
// 导入
function impexcel(obj) {
if (!obj.files) {
return;
}
var f = obj.files[0];
//新建文件读取
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
//将文件读取为二进制字符串
wb = XLSX.read(data, {type : 'binary'});
console.log(wb.SheetNames[0]);
// wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
// wb.Sheets[Sheet名]获取第一个Sheet的数据
//数组形式输出数据
var arr=XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
console.log(arr);
for(var key in arr){
//输出下角标
//console.log(key);
//输出每个元素(对象形式)
console.log(key,arr[key]);
//输出每个元素的值(数组形式)
console.log(Object.values(arr[key]));
//将数组转化为字符串以“,”分割(字符串形式)
var strsub=Object.values(arr[key]).toString();
console.log(strsub);
}
//字符串形式输出(原模原样的将数组对象转为字符串)
var str=JSON.stringify(arr);
console.log(str);
};
reader.readAsBinaryString(f);
}
导出(需要xlsx.full.min.js):
“导出”这个功能查阅了了很多资料,经过测试以下方法真实可用,分享给广大好友。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="downloadExl(jsono)">导出 Excel</button>
<script src="xlsx.full.min.js"></script>
<!--调用FileSaver的saveAs函数也可以替代 a 标签实现文件下载-->
<!-- <script src = "./FileSaver.min.js"></script> -->
<script>
//如果使用 FileSaver.js 就不要同时使用以下函数
function saveAs(obj, fileName) {
//当然可以自定义简单的下载文件实现方式
var tmpa = document.createElement("a");
tmpa.download = fileName || "下载";
tmpa.href = URL.createObjectURL(obj);
//绑定a标签
tmpa.click();
//模拟点击实现下载
setTimeout(function () {
//延时释放
URL.revokeObjectURL(obj);
//用URL.revokeObjectURL()来释放这个object URL
}, 100);
}
var jsono = [
{ //测试数据1
"姓名" : "Condor Hero",
"年龄" : 18 ,
"体重" : "60kg"
},
{ //测试数据2
"姓名" : "标标",
"年龄" : 34 ,
"体重" : "70kg"
},
{ //测试数据3
"姓名" : "老冯",
"年龄" : 54 ,
"体重" : "80kg",
"性别" : "女"
}
];
const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//这里的数据是用来定义导出的格式类型
function downloadExl(data, type) {
const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(data);
//通过json_to_sheet转成单页(Sheet)数据
saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), "这里是下载的文件名" + '.' + (wopts.bookType=="biff2"?"xls":wopts.bookType));
}
function s2ab(s) {
if (typeof ArrayBuffer !== 'undefined') {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
</script>
</body>
</html>
好的,这次的分享就到这里,谢谢!
(简书.YZJGOOD原创文章,转载请注明出处)