鲁达 #头条创作挑战赛#
前言
在开发中导入功能是必不可少的，通过xl可以实现对表格的处理
js读取.xls文件
读取.xls文件需要引用的js组件地址
<script src=";></script>
1、为文件输入框添加change事件
<input type="File" onchange="importf(this)" />2、获取文件
function importf(obj) { //导入 if (!obj.files) { return; } // 获取文件数据流 var f = obj.files[0]; // 读取文件内容 var reader = new FileReader(); reader.onload = function (e) { // 读取的结果 var data = e.; wb = XLSX.read(data, { type: "binary", }); // 对获取到的数据进行转码，这就是我们读取到的文件 :获取第一个Sheet的数据 // wb.SheetNames[0]是获取Sheets中第一个Sheet的名字 const jsonSheetName = XLSX.u[wb.SheetNames[0]]); }; }4、jsonSheetName就是获取到的表格数据就可以对grid进行渲染赋值了
5、整体代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script src=";></script> <link href="; rel="stylesheet" /> <script src=";></script> </head> <body> <input type="file" onchange="importf(this)" /> <div id="demo"></div> <h3 class="demo-preview">表单预览</h3> <div id="example1"></div> <div id="controls"></div> <script> var wb; //读取完成的数据 var rABS = false; //是否将文件读取为二进制字符串 function HandsontableFun(data) { var container = document.getElementById("example1"); var hot = new Handsontable(container, { data, height: window. / 1.7, language: "zh-Cn", readOnly: true, mergeCells: true, autoRowSize: true, mergeCells: [ // {row: 1, col: 1, rowspan: 1, colspan: 3}, ], colWidths: 100, colHeaders: true, rowHeaders: true, autoColumnSize: true, manualColumnResize: true, licenseKey: "non-commercial-and-evaluation", }); (); } function importf(obj) { //导入 if (!obj.files) { return; } // 获取文件数据流 var f = obj.files[0]; // 读取文件内容 var reader = new FileReader(); reader.onload = function (e) { // 读取的结果 var data = e.; wb = XLSX.read(data, { type: "binary", }); // 对获取到的数据进行转码 const jsonSheetName = XLSX.u[wb.SheetNames[0]]); document.getElementById("demo").innerHTML = JSON.stringify(jsonSheetName); HandsontableFun(jsonSheetName); }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } } </script> </body> </html>