JavaScript将array数据下载到Excel中

news2024/10/8 18:36:59

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>下载Excel</title>
</head>
<body>
    <button onclick="downloadfile()">下载Excel</button>
    <script>
        function downloadfile() {
            
            var workbook = XLSX.utils.book_new(); //这段代码创建了一个名为的Workbook对象。
            console.log(workbook)
            var ws = XLSX.utils.json_to_sheet([]); //创建一个工作表对象
            var ws1 = XLSX.utils.json_to_sheet([]); //创建一个工作表对象
            XLSX.utils.book_append_sheet(workbook,ws,"ph数据"); //将工作表添加到workbook对象中
            XLSX.utils.book_append_sheet(workbook,ws1,"test"); //将工作表添加到workbook对象中

            workbook.creator = 'test123'  //创建者
            workbook.created = new Date()  //创建时间

            var data = [

                {"bz":"","cqqk":"/","date":"2023-01-04","djperson":"zs","id":1,"name":"2#","ph":5.8},{"bz":"","cqqk":"/","date":"2023-01-04","djperson":"zs","id":2,"name":"3#","ph":5.06}
            ]
            var jsonDataWithHeaders = [
                { "header1": "value1", "header2": "value2" },
                { "header1": "value3", "header2": "value4" }
                ];
            var datas = []
            for(var i = 0;i < data.length; i++){
                var p = {"id":data[i].id,"date":data[i].date,"name":data[i].name,"ph":data[i].ph,"cqqk":data[i].cqqk,"djperson":data[i].djperson,"bz":data[i].bz}
                datas.push(p)
            }
            //
            //将数据添加到工作表
            XLSX.utils.sheet_add_json(ws,datas,{skipHeader:false,origin:"A1"})
            XLSX.utils.sheet_add_json(ws1,jsonDataWithHeaders,{skipHeader:true,origin:"A2"})
            var date = new Date();
            var isoString = '导出数据'+ date.toISOString().slice(0,10);
            // console.log(p);
            // const date = new Date();
            // // 获取年份
            // const year = date.getFullYear().toString();    
            // // 获取月份,月份从0开始,需要加1
            // const month = (date.getMonth() + 1).toString(); 
            // // 获取日期
            // const day = date.getDate().toString();
            // 获取小时
            const hours = date.getHours().toString().padStart(2, '0');
            // 获取分钟padStart(2, '0')在前面补0
            const minutes = date.getMinutes().toString().padStart(2, '0');
            // 获取秒数
            const seconds = date.getSeconds().toString().padStart(2, '0');
            var sfm = hours+':'+minutes+':'+seconds
            var names = isoString+' '+sfm+'.xlsx'
            console.log(names);
            //导出Excel文件
            XLSX.writeFile(workbook,names)
        }
    </script>
</body>
</html>

这个建了一个Excel表,两个sheet,分别存放了一定的数据,最后进行下载下来,其中skipHeader:false,origin:"A1"代表不省略表头,表头默认是字典中的keys,从A1行开始:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2196968.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

centos7安装node18及升级glbic

centos7安装node18及升级glbic CentOS7安装nodejs18及以上版本会报错&#xff0c;glibc版本过低 安装nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash source ~/.nvm/nvm.shnvm install 18 nvm use 18#设置默认版本 nvm alias defau…

2024最新最全:超详细Nmap使用技巧(非常详细)零基础入门到精通,收藏这一篇就够了

这个工具我几乎可以不用介绍了&#xff0c;就算你们没用过&#xff0c;但是每当提起黑客工具大部分都会看到他。Nmap是一款非常强大的主机发现和端口扫描工具&#xff0c;而且nmap运用自带的脚本&#xff0c;还能完成漏洞检测&#xff0c;同时支持多平台。 一、主机发现 1. 全…

数字王国里的虚拟人——技术、商业与法律解读

数字王国里的虚拟人——技术、商业与法律解读 目录 数字王国里的虚拟人——技术、商业与法律解读引言作者解读书籍简介摘抄适用群体小结购书链接 引言 这本书是一本兼具深度和广度的跨专业领域的科普读物&#xff0c;全书以案例形式&#xff0c;用轻松有趣的笔触向读者传递了科…

【网络原理】面试高频考点!!TCP协议“三次握手,四次挥手”,保姆级详解,建议收藏!

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;计算机网络那些事 通过上篇文章&#xff0c;我们可以得知TCP通过 “确认应答” 和 “超时重传”机制相辅相成&#xff0c;共同构建了 TCP的“可靠传输机制”。而为了保障建立通信和断开通信的可靠性…

【Orange Pi 5嵌入式应用编程】-用户空间BH1750环境光传感器驱动

BH1750环境光传感器驱动 文章目录 BH1750环境光传感器驱动1、BH1750传感器介绍2、BH1750测量流程及寄存器2.1 BH1750功能结构2.2 BH1750流量流程2.3 BH1750的控制指令2.4 BH1750通信时序2.4.1 连续高分辨模式2.4.2 单次低分辨模式2.4.3 传感器灵敏度调整3、BH1750FVI驱动实现3.…

JavaEE: 深入解析HTTP协议的奥秘(3)

文章目录 HTTP认识 "报头"(Header)认识 "状态码"(status code) HTTP JavaEE: 深入解析HTTP协议的奥秘(2) 书接上文~ 认识 “报头”(Header) Header 的整体的格式是"键值对"结构. 每个键值对占一行,键和值之间使用分号分隔. Host 表示服务器主…

JVM实现跨平台的关键因素:class文件和“翻译器”

文章目录 前言关键因素&#xff1a;class文件class文件格式说明Java 源代码在class文件中的体现涉及到的知识点&#xff08;面试题&#xff09; 关键因素&#xff1a;“翻译器”解释器即时编译器&#xff08;JIT&#xff09; 总结 前言 当你通过上文对JVM有了初步的认识后&…

【电路】1.3 电功率和能量

1.3 电功率和能量 电是一种能量存在形式。 1.3.1 电压的定义 将单位正电荷由A点移动至B点&#xff0c;电场力所做的功是 w w w&#xff0c;则 u A B d w d q u_{AB}\frac{dw}{dq} uAB​dqdw​&#xff0c; w w w是功&#xff0c; q q q是电荷量从A到B&#xff0c;沿着任意路…

Squid + Stunnel 配置

环境&#xff1a; 亚马逊服务器一台&#xff1a;3.26.80.132 华为云服务器一台&#xff1a;122.59.52.68 客户机一台&#xff1a; Win11 实现的需求&#xff1a;客户机通过设置华为云代理&#xff0c;实现透过亚马逊服务器上网 一、亚马逊服务器 1、安装Squid https://bl…

刚转Mac的新手如何卸载不需要的应用程序

最开始转Mac系统的时候很是苦恼&#xff0c;到底该怎么卸载App啊&#xff0c;App直接拖到废纸篓真的能卸载干净吗&#xff0c;卸载App时会不会留下一些文件残留&#xff0c;慢慢的会不会占满内存&#xff0c;于是我找到了一个免费的卸载工具——XApp。 这是一款Mac应用程序卸载…

《贪吃蛇小游戏 1.0》源码

好久不见&#xff01; 终于搞好了简易版贪吃蛇小游戏&#xff08;C语言版&#xff09;&#xff0c;邀请你来玩一下~ 目录 Snake.h Snake.c test.c Snake.h #include<stdio.h> #include<windows.h> #include<stdbool.h> #include<stdlib.h> #inclu…

某国有资本运营中心人才选拔项目纪实

某国有资本运营中心人才选拔项目纪实 【客户行业】 政府与事业单位 【问题类型】 人才招聘选拔 【客户背景】 在三年国企改革过程中&#xff0c;南方某省政府为响应国家政策&#xff0c;提出组建专业化国有资本投资运营公司&#xff0c;大力开展专业化资本运营&#xff0c;…

016 规格参数

文章目录 新增AttrController.javaAttrVo.javaAttrServiceImpl.javaAttrAttrgroupRelationEntity.javaAttrEntity.javaAttrGroupEntity.java 查询AttrController.javaAttrServiceImpl.javaAttrRespVo.java 修改回显AttrController.javaAttrServiceImpl.java 修改提交AttrContro…

京东云主机和云服务器有啥区别?轻量云主机就是轻量应用服务器吗?

京东云主机和云服务器有啥区别&#xff1f;轻量云主机就是轻量应用服务器吗&#xff1f;云主机就是云服务器的意思&#xff0c;是京东云给自家云服务器取的名字&#xff0c;阿里云叫云服务器ECS&#xff0c;腾讯云叫云服务器CVM&#xff0c;京东云服务器叫云主机&#xff0c;京…

C++ osgEarth 多窗口 同步绘制geometry

开发环境&#xff1a; win10 64bit、Qt5.15.2、C 、MSVC2019 、osg3.5.6、 osgEarth3.1 接触osgEarth不久&#xff0c;贴出来&#xff0c;希望大家指正。 注意osgEarth版本。 采用观察者设计模式&#xff0c;设置 master 和 slave 窗口&#xff0c;通过管理类和信号槽维护窗…

_c++11

嗨喽大家好呀&#xff0c;今天阿鑫给大家带来的是c进阶——c11的内容&#xff0c;好久不见啦&#xff0c;下面让我们进入本节博客的内容吧&#xff01; _c11 统一的列表初始化右值引用可变模板参数(了解&#xff0c;不常接触)lambda表达式function和bind包装器 1. 统一的列表…

JavaWeb 15.详解Servlet及其源码

所有受过的委屈&#xff0c;都在提醒你 要好好争气。 —— 24.10.7 一、Servlet简介 1.动态资源和静态资源 静态资源 无需在程序运行时通过代码运行生成的资源&#xff0c;在程序运行之前就写好的资源&#xff0c;例如&#xff1a;html、css、js、img、音频文件和视频文件 …

职场秘籍:面试加薪,竟然拥有不同的技巧!

假如你是一位测试主管&#xff0c;去评价一名测试工程师是否优秀&#xff0c;那么你将如何去判断呢&#xff1f;你最看重的是哪方面的能力呢&#xff1f; 对于这个问题&#xff0c;是不能一概而论的&#xff0c;要分为两种情况&#xff0c;情况不同&#xff0c;答案一定是不同…

高校新生报道管理系统使用SpringBootSSM框架开发

&#xff01;&#xff01;&#xff01;页面底部,文章结尾,加我好友,获取计算机毕设开发资料 目录 一、引言 二、相关技术介绍 三、系统需求分析 四、系统设计 五、关键技术实现 六、测试与优化 七、总结与展望 一、引言 当前高校新生报到过程中存在许多问题&#xff0c;…

从0到1:用Python构建你人生中的第一个人工智能AI模型

文章目录 摘要引言数据预处理&#xff1a;为模型打下坚实基础数据预处理的步骤Python示例代码说明&#xff1a;注意事项&#xff1a; 模型建立&#xff1a;选择合适的模型神经网络示例代码说明&#xff1a; 模型训练与测试训练示例代码说明&#xff1a; 解读模型结果性能指标 深…