首页 > 数据库 >js_将excel内容先存入数据库,再将数据显示到页面

js_将excel内容先存入数据库,再将数据显示到页面

时间:2024-02-24 14:34:14浏览次数:34  
标签:data excel js JSON result var type 页面

<%--将excel数据显示到页面--%>
<script type="text/javascript">
    //原创来自 www.luofenming.com
    //首先监听input框的变动,选中一个新的文件会触发change事件
    document.querySelector("#testFile").addEventListener("change", function () {

        //获取到选中的文件
        var file = document.querySelector("#testFile").files[0];

        //判断文件大小
        //if (file.size > 1024 * 1024) {
        //    alert('当前文件大小:' + Math.floor(file.size / 1024) + 'KB,上传文件不能大于1024KB');
        //    return false;
        //}

        //判断文件类型
        var type = file.name.split('.');
        if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls' && type[type.length - 1] !== 'XLS' && type[type.length - 1] !== 'XLSX') {
            alert('只能选择excel文件导入');
            return false;
        }

        //新建一个对象_读取文件
        const reader = new FileReader();

        //读取二进制字符串
        reader.readAsBinaryString(file);

        //文件读取完时触发一个方法
        reader.onload = function (e) {
            const data1 = e.target.result; //把读出来的二进制字符串赋值给data1变量
            const zzexcel = window.XLSX.read(data1, { //从XLS文件中读取
                type: 'binary',         //数据类型_二进制数据
                cellDates: true,        //将 12/13/22 变为 2022/12/13 追加无效  。。。重要、重要
                dateNF: 'yyyy/mm/dd'    //指定日期格式为四位数的年份  。。。重要、重要
            });

            //申明变量result
            const result = [];            

            //从EXCEL中取值,放入变量result
            for (let i = 0; i < zzexcel.SheetNames.length; i++) {
                const newData = window.XLSX.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]); //xlsx.core.min.js插件 将excel数据取出
                
                //console.log(newData);           //F12 控制台中_确认
                result.push(...newData)
            }

            var data2 = JSON.stringify(result)   //用变量接收JSON数据,JSON.stringify(result)将对象变为字符串
            var excel_data = JSON.parse(data2); //JSON.parse()将字符串变为对象 。。。重要、重要
            //console.log(excel_data);           //F12 控制台中_确认

            jspreadsheet(document.getElementById('spreadsheet'), {
                //往jexcel中装入数据
                data: excel_data,
            });

            ////逐条提取数据
            for (var i = 0; i < result.length; i++) {
                //console.log(JSON.stringify(result[i]));   //EXCEL中每一行数据 F12的控制台中_确认
                var strJsonData = JSON.stringify(result[i]);
                //alert(strJsonData);      //弹窗_确认
                //}  


                //将excel_data传给后台,写入数据库 
                $.ajax({
                    url: "/jexcel_数据表_excel导入到页面.ashx",
                    datatype: "json",
                    data: { "RequestType": "inserted_excel_data", "excel_data": strJsonData },
                    success: function (data) {
                        //alert("excel导入成功")
                        document.getElementById('spreadsheet').jexcel.refresh(); //刷新表格
                    },
                    error: function (error) {
                        alert("excel导入不成功,格式、字段名与网页中的表格不一致");
                        //var falg = true;
                    }
                });

                //如果出现错误,马上停止????开启后只能处理一条数据
                //if (falg = true) {
                //    return;
                //}

            }

            //刷新表格  ????没成功???
            document.getElementById('spreadsheet').jexcel.refresh();
        }
    });

</script>

 

 

标签:data,excel,js,JSON,result,var,type,页面
From: https://www.cnblogs.com/automationanywhere/p/18031042

相关文章

  • Excel窗体控件笔记
    工作表控件分成2种表单控件(图片上面)ActiveX控件(图片下面)一,表单控件这种如果只是使用代码其实和我们直接在工作表里插入一个图形是一样的效果可以把一些参数直接设置到单元格里,不需要代码辅助,配合公式等可以实现一些自动化效果但是,设置不了一些颜色样式等等,看上去比较素......
  • JSON
    概念:JavaScriptObjectNotationJavaScript对象表示法Personp=newPerson();p.setName("张三");p.setAge(23);p.setGender("男");varp={"name":"张三","age":23,"gender":"男"};json现在多用于存储和交换文本信息的......
  • JS 2
    ......
  • 盘点一个Python自动化办公Excel数据处理的需求
    大家好,我是Python进阶者。一、前言前几天在Python白银交流群【干锅牛蛙】问了一个Python处理Excel数据的问题。问题如下:有两个问题哈:1、表头有合并单元格识别不出来,如何处理类似下图2、遇到单元格有公式自动识别成了0,如何处理,保留计算后的值,类似下图附上他自己的代码如下:目......
  • JS 1
    ......
  • three.js-坐标轴辅助器
    坐标轴辅助器(AxesHelper)用于简单模拟3个坐标轴的对象.红色代表X轴.绿色代表Y轴.蓝色代表Z轴.constaxesHelper=newTHREE.AxesHelper(5);scene.add(axesHelper);文档地址:https://threejs.org/docs/index.html#api/zh/helpers/AxesHelper构造函数(Constructor)A......
  • three.js-轨道控制器(OrbitControls)
    轨道控制器(OrbitControls)Orbitcontrols(轨道控制器)可以使得相机围绕目标进行轨道运动。要使用这一功能,就像在/examples(示例)目录中的所有文件一样,您必须在HTML中包含这个文件。进口OrbitControls是一个附加组件,必须显式导入。See Installation/Addons.import{OrbitCont......
  • Playwright nodejs切换页面tab
    主要使用下面的代码awaitpage.bringToFront();录制代码时,鼠标点击页面tab的代码没有录制进去,需要手动加上面一行代码完整的代码如下import{test,expect}from'@playwright/test';test('test',async({page})=>{awaitpage.goto('https://www.baidu.com/')......
  • 微信里打开的h5项目,实现h5跳转至微信关注公众号页面
    实现功能:在微信里打开的h5项目,想要引流去关注微信公众号。实现思路:通过公众号关注链接,跳转至公众号关注页面。实现步骤:关注公众号的链接:https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIyOTQ5ODI1NA==#wechat_redirect把链接中的蓝色字体部分替换为自己的公众......
  • 译:使用现代的 Node.js 构建简单的CLI工具
    原文地址:https://evertpot.com/node-changelog-cli-tool/作者:EvertPot发布时间:2023-02-13只使用Node.js的标准库,不安装任何外部依赖,写一个命令行工具。前言作者是多个开源项目的维护者,长久以来都是手动维护项目的变更日志(changelog)。下面是项目a12n-server的变更日......