| 使用js实现excel文件的上传及渲染到前端页面为table | 您所在的位置：网站首页 › java实现读取excel文件传到前端表格显示 › 使用js实现excel文件的上传及渲染到前端页面为table |
使用js实现excel文件的上传及渲染到前端页面为table
|
使用js实现excel文件的上传及渲染到前端页面为table: 导入表格：
执行结果：
代码展示： DOCTYPE html> Document table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 上传文件 $('#btnUpload').on('click', function () { var files = $('#file01')[0].files[0];//文件对象 // console.log(files); var file_name = files['name'];//文件名称 var index = file_name.lastIndexOf("."); if (index != -1) { file_format = file_name.substr(index + 1).toUpperCase();//文件格式后缀 if (file_format != 'XLS' && file_format != 'XLSX') { alert("只能上传.xls和.xlsx类型的文件!"); } else { //读取文件内容 var reader = new FileReader(); reader.readAsBinaryString(files); reader.onload = function (e) { var data = e.target.result; var wb = XLSX.read(data, { type: 'binary' // 以二进制流方式读取获得整份excel表格对象 }); var sheet_names = wb.SheetNames;//获取excel中所有表名称 // console.log(sheet_name); var sheet1_name = sheet_names[0];//获取excel中第一张表名称 var sheet01_obj = XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//获取excel中第一张表数据，数组类型，每一行数据都是一个对象 // console.log(sheet01_obj); // console.log(sheet01_obj.length); var table1 = ""; var table2 = ""; var keyArr = []; table1 += ""; for (var key01 in sheet01_obj[0]) { keyArr.push(key01); table1 += '' + key01 + '';//表头 // console.log(table1); }; table2 += ""; // console.log(table1); for (var i = 0; i DOCTYPE html> Document table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 上传文件 0% $('#btnUpload').on('click', function () { var files = $('#file01')[0].files[0];//文件对象 // console.log(files); var file_name = files['name'];//文件名称 var index = file_name.lastIndexOf("."); if (index != -1) { file_format = file_name.substr(index + 1).toUpperCase();//文件格式后缀 if (file_format != 'XLS' && file_format != 'XLSX') { alert("只能上传.xls和.xlsx类型的文件!"); } else { //读取文件内容 var reader = new FileReader(); reader.readAsBinaryString(files); reader.onload = function (e) { var data = e.target.result; var wb = XLSX.read(data, { type: 'binary' // 以二进制流方式读取获得整份excel表格对象 }); var sheet_names = wb.SheetNames;//获取excel中所有表名称 // console.log(sheet_name); var sheet1_name = sheet_names[0];//获取excel中第一张表名称 var sheet01_obj = XLSX.utils.sheet_to_json(wb.Sheets[sheet1_name]);//获取excel中第一张表数据，数组类型，每一行数据都是一个对象 // console.log(sheet01_obj); // console.log(sheet01_obj.length); var table1 = ""; var table2 = ""; var table3 = ""; var keyArr = []; table1 += ""; for (var key01 in sheet01_obj[0]) { keyArr.push(key01); table1 += '' + key01 + '';//表头 // var table="ArtistTitle"; // console.log(table1); }; table2 += ""; // console.log(table1); for (var i = 0; i |
【本文地址】
公司简介
联系我们