h5页面excel转json

已于 2024-07-25 09:24:30 修改
阅读量181 收藏
点赞数 1
分类专栏： Html5 文章标签： excel json javascript html5
于 2023-05-27 10:09:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36158551/article/details/130897915
版权

1. h5页面excel转json

1.1. h5页面excel转json

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Excel转Json</title>
<!--    <script type="text/javascript" src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>-->
<!--    <script type="text/javascript" src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>-->
<!--    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
<!--    <script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>-->
    <script type="text/javascript" src="../static/util/excel/axios.min.js"></script>
    <script type="text/javascript" src="../static/util/excel/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../static/util/excel/xlsx.full.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/page-excel.css"/>
</head>

<body>
<div>
    <section>
        <input class="up_input_excel" type="file" multiple="multiple"
               id="up_excel_id" accept=".json,.yml,.xlsx"
               capture="camera" enctype="multipart/form-data"/>
        <label class="add_accessory_btn up_img" for="up_excel_id"></label>
    </section>
    <div id="excel_file_id"></div>
    <div id="excel_file_result"></div>
</div>


<script>
    $(function () {
        //监听
        listener()
    });

    /**
     * 监听
     */
    function listener() {
        //上传Excel文件
        $('#up_excel_id').change(function () {
            var excelFile = '';
            var files = this.files
            if (files) {
                if (files.length > 1) {
                    mui.alert('每次只能上传一个文件！', ' ', '确定',
                        function () {
                            $('.mui-popup-backdrop').css({'display': 'none'})
                        }, 'div');
                } else {
                    for (var i = 0; i < files.length; i++) {
                        excelFile = files[i];
                        $('#excel_file_id').html(excelFile.name)
                        //Excel转化为Json
                        transExcelToJson(excelFile)
                    }
                }
            }
        })
    }

    /**
     * Excel转化为Json
     */
    function transExcelToJson() {
        if (!excelFile) {
            alert("请选择文件");
            return;
        }
        var fileReader = new FileReader();
        fileReader.onload = function (fileRes) {
            try {
                var fileData = fileRes.target.result
                // 以二进制流方式读取得到整份excel表格对象
                var workbook = XLSX.read(fileData, {
                    type: 'binary'
                })
                var fileFlowArr = []; // 存储获取到的数据
            } catch (e) {
                console.log('文件类型不正确');
                return;
            }
            // 表格的表格范围，可用于判断表头是否数量是否正确
            // 遍历每张表读取
            for (var sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    var excelObj = {};
                    excelObj.name = sheet;
                    excelObj.data = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
                    fileFlowArr.push(excelObj);
                    // break; // 如果只取第一张表，就取消注释这行
                }
            }
            //在控制台打印出来表格中的数据
            let excelJson = {};
            for (let i = 0; i < fileFlowArr.length; i++) {
                let sheet = fileFlowArr[i];
                if (null == sheet) {
                    continue;
                }
                if (sheet.name.indexOf('ignore_') === 0) {
                    continue;
                }
                let childJSON = null;
                let sheetArr = sheet.data;
                let keys = sheetArr[0];
                if (keys.length === 1) {
                    //纯数组 [] 表格名字：sheet.name
                    childJSON = [];
                    for (let j = 0; j < sheetArr.length; j++) {
                        let fieldType = sheetArr[j][0];
                        if (fieldType && typeof fieldType == 'string'
                            && fieldType.indexOf('[') == 0) {
                            fieldType = JSON.parse(fieldType);
                        }
                        childJSON[j] = fieldType;
                    }
                } else if (sheetArr.length === 2) {
                    //对象 表格名字：sheet.name
                    childJSON = {};
                    let value = sheetArr[1];
                    for (let fieldTypeArr in value) {
                        let fieldType = value[fieldTypeArr];
                        if (fieldType && typeof fieldType == 'string'
                            && fieldType.indexOf('[') == 0) {
                            fieldType = JSON.parse(fieldType);
                        }
                        childJSON[fieldTypeArr] = fieldType;
                    }
                } else if (sheetArr.length > 3) {
                    //数组  表格名字：sheet.name
                    childJSON = [];
                    for (let j = 1; j < sheetArr.length; j++) {
                        if (null == sheetArr[j] || '' == sheetArr[j]) {
                            continue;
                        }
                        let dataJson = {};
                        for (let k in keys) {
                            let key = k;
                            if (key.indexOf('.') !== -1) {
                                let tempKeys = key.split('.');
                                let tempJSON = dataJson;
                                for (let t = 0; t < tempKeys.length - 1; t++) {
                                    if (null == tempJSON[tempKeys[t]]) {
                                        tempJSON[tempKeys[t]] = {};
                                    }
                                    tempJSON = tempJSON[tempKeys[t]];
                                }
                                tempJSON[tempKeys[tempKeys.length - 1]] = sheetArr[j][k];
                            } else {
                                let fieldType = sheetArr[j][k];
                                if (fieldType && typeof fieldType == 'string'
                                    && fieldType.indexOf('[') == 0) {
                                    fieldType = JSON.parse(fieldType);
                                }
                                dataJson[key] = fieldType;
                            }
                        }
                        childJSON.push(dataJson);
                    }
                }
                if (null == childJSON) {
                    continue;
                }
                if (sheet.name.toLowerCase().indexOf('sheet') !== -1) {
                    if (fileFlowArr.length === 1) {
                        excelJson = childJSON;
                    } else {
                        Object.assign(excelJson, childJSON);
                    }
                } else {
                    excelJson[sheet.name] = childJSON;
                }
            }
            console.log(excelJson);
            excelJson = [{level: excelJson}];
            excelJsonStr = JSON.stringify(excelJson);
            $('#excel_file_result').html('转换结果：' + excelJsonStr)
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(excelFile);
    }
</script>
</body>
</html>

代码下载
h5页面excel（本地）转json

1.2. h5页面excel（本地）转json

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>配置工具</title>
    <link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
    <script type="text/javascript" src="../static/js/mui.min.js"></script>
    <script type="text/javascript" src="../static/util/excel/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/page-excel.css"/>
</head>

<body>
<div>
    <section>
        <input class="up_input_excel" type="file" multiple="multiple"
               id="up_excel_id" accept=".json,.yml,.xlsx"
               capture="camera" enctype="multipart/form-data"/>
        <label class="add_accessory_btn up_img" for="up_excel_id"></label>
    </section>
    <div id="excel_file_id"></div>
    <div id="excel_file_result"></div>
</div>


<script>
    $(function () {
        //监听
        listener()
        //本地Excel转化为Json
        getLocalExcelJson()
    });
    /**
     * 本地Excel转化为Json
     */
     function getLocalExcelJson() {
         //本地xls文件路径
        let url = '../assets/excel/china_geo.xlsx';
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = "blob"
        xhr.onload = function() {
            if (this.status === 200) {
                const blob = this.response
                const fileReader = new FileReader()
                fileReader.readAsBinaryString(blob)
                fileReader.onload = function (file) {
                    console.log("==file==",file)
                    let dataBinary = file.target.result
                    // xlsx.js读取
                    let workBook = XLSX.read(dataBinary, {type: 'binary', cellDates: true})
                    let workSheet = workBook.Sheets[workBook.SheetNames[0]]
                    const data = XLSX.utils.sheet_to_json(workSheet)
                    console.log(data)
                    var excelJson=JSON.stringify(data)
                    //$('#excel_file_id').html(excelFile.name)
                    $('#excel_file_result').html('转换结果：' + excelJson)
                }
            }
        }
        xhr.send();

    }
     /**
     * 监听
     */
    function listener() {
        //上传Excel文件
        $('#up_excel_id').change(function () {

        })
    }
</script>
</body>
</html>

资源下载
h5页面excel转json

雪芽蓝域zzs
关注
专栏目录
h5页面如何预览excel文件_kintone excel预览插件
weixin_28718793的博客
12-31 906
Index概要这次为大家分享的是，如何用js写出excel文件的预览。他方便了pc用户和手机端用户可以无需下载，并且直接在线预览excel文件。因为excel转html的显示用的是第三方开源库的代码，所以实现上有所限制。具体请参见所用到开源的库这些库的说明。支持不支持多sheet显示图片显示合并后的单元格显示链接，文字样式等手机画面优化效果图PC：手机：示例代码所用到开源的库js:css:代码...
h5页面如何预览excel文件_用 JS 实现 excel 预览
weixin_39600366的博客
12-22 1755
这次为大家分享的是，如何用 js 写出 Excel 文件的预览。他方便了 pc 用户和手机端用户可以无需下载，并且直接在线预览 Excel 文件。因为 Excel 转 HTML 的显示用的是第三方开源库的代码，所以实现上有所限制。具体请参见 所用到开源的库 这些库的说明。支持不支持多 sheet 显示图片显示合并后的单元格显示链接，文字样式等手机画面优化效果图PC： 手机： 示例代码所用到开源的库...
html读取excel转json,[转]纯js导出json到excel(支持chrome)
weixin_40003767的博客
06-17 225
转自:http://blog.csdn.net/educast/article/details/52775559function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {//先转化jsonvar arrData = typeof JSONData != ‘object‘ ? JSON.parse(JSONData) : JSONDa...
Web前端之解析xlsx文件、Excel表格转为JSON数据、script标签的type属性、使用webApi选择文件、单元格的地址索引、获取对象的长度、获取属性的数量、限制文件类型、动态添加类名
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
01-17 2254
Web前端之解析xlsx文件、Excel表格转为JSON数据、script标签的type属性、使用webApi选择文件、单元格的地址索引、获取对象的长度、获取属性的数量、限制文件类型、动态添加类名
前端excel文件转json
weixin_42475867的博客
05-31 552
# 下载excel2json https://github.com/neil3d/excel2json/releases - 下载成功后将文件放到D盘根目录（目录路径不要包含中文） - 打开cmd,进入到excel2json,输入命令excel2json –excel F:\order-gy.xlsx –json F:\ex.json –header 1(实际路径根据自己放的位置写） - 命令行返回 [d.xlsx]： Conversion complete in [315.8478...
页面上传excel文档前端解析文json
weixin_56762855的博客
10-28 570
json
Excel转Json
weixin_30597269的博客
08-14 84
参考： Excel2JSON Excel转JSON Excel另存为JSON的技巧 （office的插件） excel2json游戏程序员的自我修养（其他人写的工具） Excel转JSON格式-站长工具（在线工具） 一、游戏中的JSON配置文件 看一下君海网络发行的月流三千万的H5游戏《时光幻境》的json配置文件 二、在线工具 Excel转JSON...
h5页面如何预览excel文件_如何在excel／HTML5中解析excel文件
weixin_39976748的博客
12-22 551
Kunal Vyasducktyped提出了一个问题：How to parse Excel file in Javascript/HTML5，或许与您遇到的问题类似。Below Function converts the Excel sheet (XLSX format) data to JSON. you can add promise to the function.var ExcelToJS...
vue + vue-json-excel 制作导出excel
Whit3ZzT的博客
02-14 3084
vue+vue-json-excel导出的步骤详解
h5 列表导出为excel
11-01
在IT领域，尤其是在Web开发中，常常需要将HTML5（H5）页面中的表格数据导出为Excel格式，以便用户可以方便地存储、编辑或分享数据。"h5 列表导出为excel"这个话题涉及到的技术点主要包括HTML5、JavaScript、CSS以及...
使用HBuilderX工具写jQuery代码或提示缺失解决方案
qq_36158551的博客
05-23 5448
问题：使用HBuilderX工具写jQuery代码时会出现不会有提示的情况 解决方案： HBuilderX编译器右下角有一个语法提示库，点开之后，把需要提示的勾选上就可以了
Html、Android、微信小程序中空白空格样式
qq_36158551的博客
01-02 3236
HTML中空白空格样式一.& nbsp;二．& ensp;三．& emsp;四．& thinsp;五．& zwnj;六．& zwj;    HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（& nbsp;）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（& ensp; & ems...
html 首行缩进2字符
qq_36158551的博客
08-19 1766
这样就很容易实现文本段落的缩进。
H5去掉输入框type为number时的上下箭头
qq_36158551的博客
01-02 1453
H5去掉输入框type为number时的上下箭头   html5中，input type="number"时 右边会有一个上下小箭头，介绍去掉这个箭头的方法，完成浏览器的兼容，页面效果的统一 一。公共样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>去...
Html css样式总结
qq_36158551的博客
09-15 1334
布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，本章节为定位在布局中的使用技巧和注意事项。position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位–相对于浏览器窗口）。
Html css水平居中+垂直居中+水平垂直居中的方法总结
qq_36158551的博客
09-16 1309
（1）块级元素（如div）：独占一行，不和其他元素在一起，可以设置宽和高；当没设置宽和高时，宽度和父级宽度一样，高度由内容的高度决定；当设置宽和高时，元素的宽高就是设置值，当内容超过宽高值时，元素宽高值也不变高，会溢出。（2）行级元素（如span）：不会独占一行，和其它元素在一起，不可以设置宽和高，由里面的内容决定；设置的宽高无效。（3）行内块级元素（如img）：不会独占一行，可以和其它元素在一起，可以设置宽和高；当没设置宽和高时，宽高有元素内容决定；当设置宽和高时，元素内容宽高为设置值。
Html jquery下拉select美化插件——selectFilter.js
最新发布
qq_36158551的博客
09-26 1211
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得开发者能更高效地构建交互式网页。在本案例中，插件正是基于jQuery构建的，旨在提供一种优雅的方式来增强下拉框的视觉效果。在网页设计中，下拉选择框是常见的用户交互元素，但其默认样式往往较为单调，不能满足现代网页的美观需求。为了解决这个问题，开发者们创建了各种各样的下拉选择框美化插件，其中便是其中之一。这个插件不仅能够美化下拉选择框，还支持常用的事件处理，提升了用户体验。
微信公众号h5 页面获取本地json文件 有缓存
09-01
微信公众号的H5页面获取本地JSON文件时是有缓存的。 微信公众号的H5页面本质上是运行在微信内置浏览器中的网页，与传统浏览器不同，微信内置浏览器对页面的资源加载和缓存有一些特殊的处理。 当H5页面发起对本地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值