<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<title>sheetDemo.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
.up_btn{
margin: 30px;
}
#toExcel{
background: #4CAF50;
margin: 30px;
height: 40px;
padding: 10px;
color: #fff;
cursor: pointer;
}
#excelFile{
margin-top: 30px;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/xlsx.min.js" ></script>
<script>
var bt=["Respondent.ID","type","time","loadtime","action","from","wid","vid","videotime","iscomplete","totalstaytime","loadstaytime","videoplaytime"];
var excelFile;
// 读取文件的内容
function showfile(obj) {
if(!obj.files) {
return;
}
var f = obj.files[0];
var reader = new FileReader();
reader.readAsBinaryString(f);
reader.onload = function(e) {
var data = e.target.result;
excelFile = XLSX.read(data, {
type: 'binary'
});
//展示所有表
// for(var i=0;i<excelFile.SheetNames.length;i++){
// document.getElementById("excelFile").innerHTML +=excelFile.SheetNames[i]+"="+JSON.stringify(XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[i]]))+"<br/>";
// }
var dataTable1 = "";
//只展示第一个表
var headers = new Array();
var str = XLSX.utils.sheet_to_json(excelFile.Sheets[excelFile.SheetNames[0]])
dataTable1+= "<table border='1' id='data'><tr>";
for(var key in str[0]){
headers.push(key) //获取表头
//dataTable1 += "<th>" + key + "</th>"
}
for(var i=0;i<bt.length;i++){
dataTable1 += "<th>" + bt[i] + "</th>"
}
dataTable1 += "</tr>"
console.log(str.length)
//这里显示前五行
for(var i=0;i<str.length;i++){
// var json = JSON.stringify(str[i])
var json = str[i];
var one = eval("(" + json[headers[2]] + ")");
var id = json[headers[0]];
var type = json[headers[1]];
for(var j=0;j<one.length;j++){
var ss = [];
ss[0] = id;
ss[1] = type;
ss[2] = one[j].time==null?one[j].intotime:one[j].time;
ss[3] = one[j].loadtime==null?"":one[j].loadtime;
ss[4] = one[j].operate==null?"":one[j].operate;
ss[5] = one[j].from==null?"":one[j].from;
ss[6] = one[j].wid==null?"":one[j].wid;
ss[7] = one[j].vid==null?"":one[j].vid;
ss[8] = one[j].videotime==null?"":one[j].videotime;
ss[9] = one[j].iscomplete==null?"":one[j].iscomplete;
ss[10] = one[j].totalstaytime==null?"":one[j].totalstaytime;
ss[11] = one[j].loadstaytime==null?"":one[j].loadstaytime;
ss[12] = one[j].videoplaytime==null?"":one[j].videoplaytime;
dataTable1 += "<tr>";
for(var m=0;m<bt.length;m++){
dataTable1 += "<td>" + ss[m] + "</td>";
}
dataTable1 += "</tr>";
}
/*for( var j=0;j<headers.length;j++){
dataTable1 += "<td>" + json[headers[j]] + "</td>";
var one = eval("(" + json[headers[j]] + ")");
console.log(one.length+one[0].operate);
}*/
}
dataTable1 += "</table>";
document.getElementById("excelFile").innerHTML = dataTable1;
}
}
</script>
<script type="text/javascript">
function toExcel(event) {
// 获得表格数据的html标签和文本d;
var html = "<html><head><meta charset='UTF-8'></head><body>"+document.getElementById("data").outerHTML+"</body></html>";
// 创建一个Blob对象，第一个参数是文件的数据，第二个参数是文件类型属性对象
var blob = new Blob([html],{type:"application/vnd.ms-excel"});
var a = event.target;
// 利用URL的createObjectURL方法为元素a生成blobURL
a.href = URL.createObjectURL(blob);
// 设置文件名
a.download = "htmltable-base64.xls";
openDownloadDialog(blob,"result.xls");
}
</script>
<script type="text/javascript">
/**
* 通用的打开下载对话框方法，没有测试过具体兼容性
* @param url 下载地址，也可以是一个blob对象，必选
* @param saveName 保存文件名，可选
*/
function openDownloadDialog(url, saveName)
{
if(typeof url == 'object' && url instanceof Blob)
{
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if(window.MouseEvent) event = new MouseEvent('click');
else
{
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
</script>
<div class="up_btn">
<input type="file" id="xFile" name="" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="showfile(this)"></div>
<a id="toExcel" onclick="toExcel(this)">导出excel</a>
<div id="excelFile"></div>
</body>
</html>
评论0