VUE excel表格导出

js代码

    //下载模板

    downloadExl() {

     // 标题

      const tHeader = [‘xxx’,'xxx','xx名称','电枪xx','协议xx','snxx'];

      // key

      const filterVal = ['agentName', 'stationName', 'equName', 'channelNumber', 'manufacturer', 'sn', ];

        // 值

      const datas = [

        {

          agentName:   '你好',

          stationName:   '我们',

          equName:       '朋友',

          channelNumber: '一起',

          manufacturer:  '是的',

          sn:           '123456',

        },

      ];

       // 整合

      const json=datas.map(v => filterVal.map(j => v[j]));

      // 导出

      export_json_to_excel(json,'导出名称.xlsx'),tHeader,'导出名称');

    },

excel js代码

import XLSX from "xlsx";

/**

 * 导出excel

 * json 服务端发过来的数据

 * name 导出Excel文件名字

 * titleArr 导出Excel表头

 * sheetName 导出sheetName名字

 */

export function export_json_to_excel(json,name,titleArr,sheetName) {

    /* convert state to workbook */

    var data = new Array();

    var keyArray = new Array();

    const getLength = function (obj) {

        var count = 0;

        for (var i in obj) {

        if (obj.hasOwnProperty(i)) {

            count++;

            }

        }

        return count;

    };

    for (const key1 in json) {

        if (json.hasOwnProperty(key1)) {

            const element = json[key1];

            var rowDataArray = new Array();

            for (const key2 in element) {

                if (element.hasOwnProperty(key2)) {

                    const element2 = element[key2];

                    rowDataArray.push(element2);

                    // if (keyArray.length < getLength(element)) {

                    //     keyArray.push(key2);

                    // }

                }

            }

            if(null!=rowDataArray && rowDataArray.length>0){

                console.log('rowDataArray=', rowDataArray);

                data.push(rowDataArray);

                console.log('data=', data);

            }

        }

    }

    data.splice(0, 0,titleArr);

    console.log('data', data);

    const ws = XLSX.utils.aoa_to_sheet(data);

    const wb = XLSX.utils.book_new();

    // 此处隐藏英文字段表头

    var wsrows = [{ hidden: false }];

    ws['!rows'] = wsrows; // ws - worksheet

    XLSX.utils.book_append_sheet(wb, ws, sheetName);

    /* generate file and send to client */

    // XLSX.writeFile(wb, name + '.xlsx');

    XLSX.writeFile(wb, name);

}

显示效果

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链表的反转—c++版本

过程分析&#xff1a; 代码实现&#xff1a; #include <iostream>struct LinkNode{ //创建一个结构体做为链表的结点int data; //数据域LinkNode* next; //指针域 };void Print_Link(LinkNode* phead) //打印链表 {while (phead ! nullptr){std::cout …

va-Q-tec实现温度敏感产品运输过程质量控制温控无忧

摘要&#xff1a;温度敏感产品运输对供应链全流程的温度质量要求较高&#xff0c;往往需要借助特殊的温湿度监测技术产品。va-Q-tec与虹科Comet合作&#xff0c;采用虹科Comet的U系列温度记录仪&#xff0c;为集装箱运输过程提供完整的温控包装解决方案。 一、客户背景 va-Q-…

信息系统的安全保护等级的五个级别

信息系统的安全保护等级分为五级&#xff1a;第一级为自主保护级、第二级为指导保护级、第三级为监督保护级、第四级为强制保护级、第五级为专控保护级。 法律依据&#xff1a;《信息安全等级保护管理办法》第四条 信息系统的安全保护等级分为以下五级&#xff1a;   &#…

数字化转型过程中面临最大的问题是什么?如何借助数字化工具实现快速转型?

在科技快速发展的时代&#xff0c;数字化转型已经成为企业的重要战略。当企业努力适应数字化时代并取得成功时&#xff0c;他们可能会面临各种必须有效应对的挑战。   数字化转型不仅仅是将新技术应用到企业的运营中&#xff0c;还需要对企业的运营方式、与客户的互动方式和价…

一个ETL流程搞定数据脱敏

数据脱敏是什么&#xff1f; 数据脱敏是指在数据处理过程中&#xff0c;通过一系列的技术手段去除或者替换敏感信息&#xff0c;以保护个人隐私和敏感信息的安全的过程。数据脱敏通常在数据共享、数据分析和软件测试等场景下使用&#xff0c;它旨在降低数据泄露和滥用的风险。…

卫星信号监测可靠性提升10倍,移动性提升30倍!这家广播公司是这样做到的

来源&#xff1a;德思特测试测量 德思特案例 | 卫星信号监测可靠性提升10倍&#xff0c;移动性提升30倍&#xff01;这家广播公司是这样做到的 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 1 广播卫星频谱监测背景 频率的测量结果能够充分反映出节目播出的质量&am…

OpenGL YUV 和 RGB 图像相互转换出现的偏色问题怎么解决?

未经作者(微信ID:Byte-Flow)允许,禁止转载 文章首发于公众号:字节流动 早上知识星球里的一位同学,遇到 yuv2rgb 偏色问题,这个问题比较典型,今天展开说一下。 省流版 首先 yuv2rgb 和 rgb2yuv 之间的转换要基于相同的标准,转换使用不同的标准肯定会引起偏色,常见的…

kubernetes 部署 spinnaker

spinnaker简介 Spinnaker 是一个开源、多云持续交付平台&#xff0c;它将强大而灵活的管道管理系统与主要云提供商的集成相结合。Spinnaker 提供应用程序管理和部署&#xff0c;帮助您快速、自信地发布软件变更。 Spinnaker 提供了两组核心的功能&#xff1a; 应用管理与应用程…

第十一章 docker swarm集群部署

文章目录 前言一、安装docker1.1 解压1.2 配置docker 存储目录和dns1.3 添加docker.service文件1.4 docker 启动验证 二、docker swarm 集群配置2.1 关闭selinux2.2 设置主机名称并加入/etc/hosts2.3 修改各个服务器名称&#xff08;uname -a 进行验证&#xff09;2.4 初始化sw…

redis的集群,主从复制,哨兵

redis的高可用 在Redis中&#xff0c;实现高可用的技术主要包括持久化、主从复制、哨兵和集群&#xff0c;下面分别说明它们的作用&#xff0c;以及解决了什么样的问题。 持久化&#xff1a; 持久化是最简单的高可用方法&#xff08;有时甚至不被归为高可用的手段&#xff09;…

【Flask使用】全知识md文档,4大部分60页第3篇:Flask模板使用和案例

本文的主要内容&#xff1a;flask视图&路由、虚拟环境安装、路由各种定义、状态保持、cookie、session、模板基本使用、过滤器&自定义过滤器、模板代码复用&#xff1a;宏、继承/包含、模板中特有变量和函数、Flask-WTF 表单、CSRF、数据库操作、ORM、Flask-SQLAlchemy…

企业微信身份验证

本篇主要是在上一篇获取第三方凭证基础上&#xff0c;用户通过三方网站自定义授权登录后获取用户信息&#xff0c;以实现用户绑定登录功能。 构造第三方应用授权链接 如果第三方应用需要在打开的网页里面携带用户的身份信息&#xff0c; 第一步需要构造如下的链接来获取授权c…