欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > 利用SheetJS在前端解析Excel读取数据并赋值给组件

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

2024/11/6 17:20:15 来源:https://blog.csdn.net/2301_80687933/article/details/143484447  浏览:    关键词:利用SheetJS在前端解析Excel读取数据并赋值给组件

xlsx.full.min.js‌是一个由SheetJS出品的JavaScript工具包,专门设计用于在前端环境中读取和导出Excel文件。它支持多种格式,包括xls、xlsx和ods等,极大地简化了在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() 方法。

  <td colspan="2"><label>一键导入</label><input type="file" onchange="inDateByExcel(event);"/></td>

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];// 将工作表转换为JSONvar 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数据。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com