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

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

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

  1. 引入库文件:在HTML文件中引入xlsx.full.min.js 库。
  2. 读取Excel文件:通过HTML的<input>元素选择文件后,使用JavaScript监听文件变化时间,获取文件内容。
  3. 处理数据:将读取到的数据转化成JSON格式或其它所需格式进行处理。

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

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

    <#-- 前端解析 excel 插件-->

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

    <label>一键导入</label>
  3. 编写自定义方法 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数据。

相关推荐
ma773 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在3 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang7 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻8 分钟前
前端面试十一之TS
前端
摆烂为不摆烂8 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead21 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00124 分钟前
封装一个有最小化的dialog组件
前端·javascript·css
水果里面有苹果26 分钟前
20-C#构造函数--虚方法
java·前端·c#
Zachery Pole26 分钟前
BootStrap
前端·bootstrap·html
一尾流莺28 分钟前
【2025 年中总结】世事浮云何足问,不如高卧且加餐
前端·掘金社区