利用SheetJS在前端解析Excel读取数据并赋值给组件

‌**xlsx.full.min.js** ‌是一个由SheetJS出品的JavaScript工具包，专门设计用于在前端环境中读取和导出Excel文件。它支持多种格式，包括xls、xlsx和ods等，极大地简化了在Web应用中处理Excel数据的过程‌。

使用xlsx.full.min.js的基本步骤如下：

引入库文件：在HTML文件中引入xlsx.full.min.js 库。

读取Excel文件：通过HTML的<input>元素选择文件后，使用JavaScript监听文件变化时间，获取文件内容。

处理数据：将读取到的数据转化成JSON格式或其它所需格式进行处理。

下面演示如何在前端页面上解析excel数据并赋值给组件

下载 xlsx.full.min.js 第三方库，并在页面引入

<#-- 前端解析 excel 插件-->
<script type="text/javascript" src="/dist/xlsx.full.min.js"></script>
创建一个文件类型的输入框<input type="file">, 供用户上传文件。onchange是对该控件进行监听，有文件上传时，调用自定义 inDateByExcel() 方法。
<label>一键导入</label>

编写自定义方法 inDateByExcel()，处理数据

// 一键导入
window.inDateByExcel = function (e) {
var file = e.target.files[0]; // 得到上传的文件
var type = file.name.split('.'); // 得到一个数组存放文件名和文件后缀
// 判断上传的文件是否是excel 类型，不是则提示
if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
layer.alert('只能导入excle文件', { title: '上传失败', icon: 5, time: 3000);
} else {
var reader = new FileReader();
reader.readAsArrayBuffer(file);

复制代码

     reader.onload = function (e) {
        var data = new Uint8Array(reader.result);
        var workbook = XLSX.read(data, {type: 'array'});
        // 假设我们只读取第一个工作表
        var firstSheetName = workbook.SheetNames[0];
        var worksheet = workbook.Sheets[firstSheetName];
        // 将工作表转换为JSON
        var json = XLSX.utils.sheet_to_json(worksheet);
        $.each(json, function (i, v) {
          //     console.log(v)
         // 给单选按钮赋值
         $('input[type="radio"][name="payType"][value="'+ v.付款方式 +'"]').prop('checked', true);  // 付款方式
         $('#username').val(v.姓名);  // 姓名
         $('#phone').val(v.电话);  // 电话
         $('#address').val(v.地址);  // 地址
         // 如果 excel 里的字段没有数据，在浏览器打印出来是找不到该字段的，
         if (v.产品编码 != 'undefined') {        // 产品编码非必填项
            $('#productCode').val(v.产品编码);  // 产品编码
          }
         form.render();  // layui的下拉框、单选按钮类型改变值后需要重新渲染，这里是所有类型都重新渲染
         });
      }
  }

}

经过上述步骤就，就实现了在前端页面解析excel数据。