前端解析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

相关文章
|
4月前
|
存储 前端开发 JavaScript
|
5月前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
2064 64
|
9月前
|
人工智能 自然语言处理 Java
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
FastExcel 是一款基于 Java 的高性能 Excel 处理工具,专注于优化大规模数据处理,提供简洁易用的 API 和流式操作能力,支持从 EasyExcel 无缝迁移。
1956 65
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
|
10月前
|
机器学习/深度学习 编解码 前端开发
探索无界:前端开发中的响应式设计深度解析####
【10月更文挑战第29天】 在当今数字化时代,用户体验的优化已成为网站与应用成功的关键。本文旨在深入探讨响应式设计的核心理念、技术实现及最佳实践,揭示其如何颠覆传统布局限制,实现跨设备无缝对接,从而提升用户满意度和访问量。通过剖析响应式设计的精髓,我们将一同见证其在现代Web开发中的重要地位与未来趋势。 ####
174 7
|
10月前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
248 4
|
10月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
209 1
|
6月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
638 29
|
6月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
184 4
|
6月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
移动开发 前端开发 JavaScript
从入门到精通:H5游戏源码开发技术全解析与未来趋势洞察
H5游戏凭借其跨平台、易传播和开发成本低的优势,近年来发展迅猛。接下来,让我们深入了解 H5 游戏源码开发的技术教程以及未来的发展趋势。

推荐镜像

更多
  • DNS