前端解析Excel

简介: 先写一个文件提交<input type="file" id="excel-file">导入xlsx.core.min.js<script type="text/javascript" src="xlsx.
  • 先写一个文件提交

    <input type="file" id="excel-file">
  • 导入xlsx.core.min.js

    <script type="text/javascript" src="xlsx.core.min.js"></script>
  • 解析excel

    <script>
        $('#excel-file').change(function (e) {
    var files = e.target.files;
    var fileReader = new FileReader();
    fileReader.onload = function (ev) {
    try {
        var data = ev.target.result,
            workbook = XLSX.read(data, {
                type: 'binary'
            }), // 以二进制流方式读取得到整份excel表格对象
            persons = []; // 存储获取到的数据
    } catch (e) {
        console.log('文件类型不正确');
        return;
    }
    // 遍历每张表读取
    for (var sheet in workbook.Sheets) {
        if (workbook.Sheets.hasOwnProperty(sheet)) {
            var fromTo = workbook.Sheets[sheet]['!ref'];
            console.log(fromTo);
            var datas = workbook.Sheets[sheet];
            
            // 如果有不规范数据可以在这里进行处理datas
            
            persons = persons.concat(XLSX.utils.sheet_to_json(datas));
            break; // 只读了第一张表
        }
    }
       console.log(persons);
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
        });
    </script>
  • 全部代码

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <input type="file" id="excel-file">
    </body>
    <script type="text/javascript" src="xlsx.core.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $('#excel-file').change(function (e) {
    var files = e.target.files;
    var fileReader = new FileReader();
    fileReader.onload = function (ev) {
    try {
        var data = ev.target.result,
            workbook = XLSX.read(data, {
                type: 'binary'
            }), // 以二进制流方式读取得到整份excel表格对象
            persons = []; // 存储获取到的数据
    } catch (e) {
        console.log('文件类型不正确');
        return;
    }
    
    // 遍历每张表读取
    for (var sheet in workbook.Sheets) {
        if (workbook.Sheets.hasOwnProperty(sheet)) {
            var fromTo = workbook.Sheets[sheet]['!ref'];
            console.log(fromTo);
            var datas = workbook.Sheets[sheet];
            console.log(datas);
            // 处理不规范的数据
            for (var nums in datas) {
                console.log(nums);
                var num = nums.replace(/[^0-9]/ig, "");
                console.log(num);
                var row_data = new Array();
                row_data[0] = "A" + String(num);
                row_data[1] = "B" + String(num);
                row_data[2] = "C" + String(num);
                row_data[3] = "D" + String(num);
                row_data[4] = "E" + String(num);
                row_data[5] = "F" + String(num);
                row_data[6] = "G" + String(num);
                row_data[7] = "H" + String(num);
                row_data[8] = "I" + String(num);
                row_data[9] = "J" + String(num);
                row_data[10] = "K" + String(num);
                row_data[11] = "L" + String(num);
                row_data[12] = "M" + String(num);
                
                var arry_row = new Array();
                var count = 0;
                for (var i of row_data) {
                    if (datas[i]) {
                        arry_row[count] = datas[i].v.replace(/\s*/g,"");
                        count += 1;
                    }
                }
                // 找到正确数据的列名
                if (arry_row.indexOf("单位") < 0 || arry_row.indexOf("数量") < 0) {
                    for (var i = 0; i < row_data.length; i++) {
                        delete datas[row_data[i]];
                    }
                }
                else {
                    // 修改读取范围
                    datas["!ref"] = row_data[0] + ":" + datas['!ref'].split(':')[1];
                    break;
                }
    
            }
            persons = persons.concat(XLSX.utils.sheet_to_json(datas));
            break; // 只读了第一张表
        }
    }
    console.log(persons);
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
        });
    </script>
    
    </html>

对前端不怎么熟悉,代码比较乱,仅供参考

本文链接:时光不写博客-前端解析Excel:xlsx.core.min.js

相关文章
|
存储 前端开发 安全
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
1456 0
|
Web App开发 前端开发 JavaScript
前端性能优化利器:图片懒加载实战解析
前端性能优化利器:图片懒加载实战解析
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
4524 64
|
人工智能 自然语言处理 Java
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
FastExcel 是一款基于 Java 的高性能 Excel 处理工具,专注于优化大规模数据处理,提供简洁易用的 API 和流式操作能力,支持从 EasyExcel 无缝迁移。
4220 65
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
|
存储 前端开发 JavaScript
|
JSON 前端开发 安全
前端开发中常用的鉴权方式解析与实践要点
本文深入探讨了前端开发中常用的鉴权方式,包括HTTP基本鉴权、Session-Cookie鉴权、Token验证、JWT(JSON Web Tokens)、单点登录(SSO)和OAuth等。文章首先明确了认证、授权、鉴权和权限控制的概念及关系,随后详细解析每种鉴权方式的工作原理、优缺点及适用场景。例如,HTTP基本鉴权简单但安全性低,适合内部网络;Session-Cookie鉴权易受CSRF攻击,适用于同域Web应用;Token和JWT无状态且扩展性好,适合分布式系统;SSO提升用户体验,适用于多系统统一登录;OAuth安全方便,适合第三方授权接入。
1755 2
|
人工智能 JSON 前端开发
如何解决后端Agent和前端UI之间的交互问题?——解析AG-UI协议的神奇作用
三桥君指出AG-UI协议通过SSE技术实现智能体与前端UI的标准化交互,解决流式传输、实时进度显示、数据同步等开发痛点。其核心功能包括结构化事件流、多Agent任务交接和用户中断处理,具有"一次开发到处兼容"、"UI灵活可扩展"等优势。智能体专家三桥君认为协议将AI应用从聊天工具升级为实用软件,适用于代码生成、多步骤工作流等场景,显著提升开发效率和用户体验。
2989 0
|
机器学习/深度学习 编解码 前端开发
探索无界:前端开发中的响应式设计深度解析####
【10月更文挑战第29天】 在当今数字化时代,用户体验的优化已成为网站与应用成功的关键。本文旨在深入探讨响应式设计的核心理念、技术实现及最佳实践,揭示其如何颠覆传统布局限制,实现跨设备无缝对接,从而提升用户满意度和访问量。通过剖析响应式设计的精髓,我们将一同见证其在现代Web开发中的重要地位与未来趋势。 ####
478 7
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
539 4
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式,前者采用继承机制来组织接口和类,后者釆用组合或聚合来组合对象。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象结构型模式比类结构型模式具有更大的灵活性。 结构型模式分为以下 7 种: • 代理模式 • 适配器模式 • 装饰者模式 • 桥接模式 • 外观模式 • 组合模式 • 享元模式
1053 140
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1456
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    719
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    588
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    593
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    675
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    860
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1706
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    409
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1407
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    714
  • 推荐镜像

    更多
  • DNS