JS_0053：JS 读取 excel 文件 转换成数组 模拟同步请求 延时等待
1， js 读取表格数据 并转化为数组
<script src="home/js/jquery.min.js"></script> <script src="home/js/xlsx.core.min.js"></script>
/* 获取excel表格中的数据 */ function sleep(ms) { return new Promise(function (resolve, reject) { setTimeout(resolve, ms); }) }; // 同步延时执行方法 async function handle() { var xhr = new XMLHttpRequest(); xhr.open('get', 'source/hentai.xlsx', true); xhr.responseType = 'arraybuffer'; xhr.onload = function (e) { if (xhr.status == 200) { var data = new Uint8Array(xhr.response) var workbook = XLSX.read(data, { type: 'array' }); mArr = workbook.Sheets[workbook.SheetNames[0]]; // 设置当表格为空时的默认字符 const sheet2JSONOpts = { /** Default value for null/undefined values */ defval: ''//给defval赋值为空的字符串 } mArr = XLSX.utils.sheet_to_json(mArr, sheet2JSONOpts); } }; xhr.send(); // 同步等待2秒后再执行下面的代码 await sleep(2000); // 打印json格式的数据 console.log(JSON.stringify(mArr)); }; handle();
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>JS读取excel转换成数组</title> <meta name="description" content="使用sheetjs读取和导出excel示例"> <style type="text/css"> table { border-collapse: collapse; } th, td { border: solid 1px #6D6D6D; padding: 5px 10px; } .mt-sm { margin-top: 8px; } body { background: #f4f4f4; padding: 0; margin: 0; } .container { width: 1024px; margin: 0 auto; background: #fff; padding: 20px; min-height: 100vh; } </style> </head> <body> <div class="container"> <p>结果输出：（下面表格可直接编辑导出）</p> <div id="result" contenteditable></div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/xlsx.core.min.js"></script> <script type="text/javascript"> var mArr = ''; // 从网络上读取某个excel文件，url必须同域，否则报错 function readWorkbookFromRemoteFile(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function (e) { if (xhr.status == 200) { var data = new Uint8Array(xhr.response) var workbook = XLSX.read(data, { type: 'array' }); if (callback) callback(workbook); // mArr = workbook.Sheets[workbook.SheetNames[0]]; // mArr = XLSX.utils.sheet_to_json(mArr); // console.log(mArr); // return mArr; } }; xhr.send(); }; function readWorkbook(workbook) { var sheetNames = workbook.SheetNames; // 工作表名称集合 var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet // var csv = XLSX.utils.sheet_to_csv(worksheet); var csv = XLSX.utils.sheet_to_json(worksheet); console.log(csv[0]['姓名']); // document.getElementById('result').innerHTML = csv2table(csv); } function loadRemoteFile(url) { readWorkbookFromRemoteFile(url, function (workbook) { // console.log(workbook); readWorkbook(workbook); }); } $(function () { // loadRemoteFile('sample/test.xlsx'); // var myaa = readWorkbookFromRemoteFile('sample/test.xlsx'); // console.log(myaa); // var xhr = new XMLHttpRequest(); // xhr.open('get', 'sample/test.xlsx', true); // xhr.responseType = 'arraybuffer'; // xhr.onload = function(e) { // if (xhr.status == 200) { // var data = new Uint8Array(xhr.response) // var workbook = XLSX.read(data, { // type: 'array' // }); // // if (callback) callback(workbook); // mArr = workbook.Sheets[workbook.SheetNames[0]]; // mArr = XLSX.utils.sheet_to_json(mArr); // console.log(mArr); // // return mArr; // } // }; // xhr.send(); // console.log(mArr); // // 新建一个XMLHttpRequest实例对象 // var xhr = new XMLHttpRequest(); // // 指定通信过程中状态改变时的回调函数 // xhr.onreadystatechange = function () { // // 通信成功时，状态值为4 // if (xhr.readyState === 4) { // if (xhr.status === 200) { // // console.log(xhr.responseText); // var data = new Uint8Array(xhr.response) // var workbook = XLSX.read(data, { // type: 'array' // }); // mArr = workbook.Sheets[workbook.SheetNames[0]]; // // console.log(mArr); // mArr = XLSX.utils.sheet_to_json(mArr); // console.log(mArr); // } else { // console.error(xhr.statusText); // } // } // }; // xhr.onerror = function (e) { // console.error(xhr.statusText); // }; // // open方式用于指定HTTP动词、请求的网址、是否异步 // xhr.open('GET', 'sample/test.xlsx', false); // // xhr.responseType = 'arraybuffer'; // // 发送HTTP请求 // xhr.send(null); // // function sleep(d){ // // var t = Date.now(); // // while(Date.now() - t <= d); // // } // // sleep(3000); // console.log("1111"); // var request = new XMLHttpRequest(); // request.open('GET', 'sample/test.xlsx', false); // request.send(null); // // request.responseType = 'arraybuffer'; // var data; // if (request.status === 200) { // data = stringToArrayBuffer(request.response); // // var data = new Uint8Array(data) // var workbook = XLSX.read(data, { // type: 'array' // }); // console.log(workbook); // // var mArr = workbook.Sheets[workbook.SheetNames[0]]; // // // // console.log(mArr); // // var mArr = XLSX.utils.sheet_to_json(mArr); // // console.log(mArr); // // console.log(data); // } else { // // alert('Something bad happen!\n(' + request.status + ') ' + request.statusText); // } // // ... // function stringToArrayBuffer(str) { // var buf = new ArrayBuffer(str.length); // var bufView = new Uint8Array(buf); // for (var i=0, strLen=str.length; i<strLen; i++) { // bufView[i] = str.charCodeAt(i); // } // return buf; // }; // console.log('aaaaa'); function sleep(ms) { return new Promise(function(resolve, reject) { setTimeout(resolve,ms); }) }; var mArr; async function handle(){ var xhr = new XMLHttpRequest(); xhr.open('get', 'sample/test.xlsx', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (xhr.status == 200) { var data = new Uint8Array(xhr.response) var workbook = XLSX.read(data, { type: 'array' }); mArr = workbook.Sheets[workbook.SheetNames[0]]; mArr = XLSX.utils.sheet_to_json(mArr); } }; xhr.send(); // 同步等待2秒后再执行下面的代码 await sleep(2000); console.log(mArr); }; handle(); }); </script> </body> </html>
琥珀君的博客
