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.mzph.cn/news/164688.shtml

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

相关文章

激光雷达与惯导标定 | Lidar_IMU_Init : 编译

激光雷达与惯导标定&#xff1a;Lidar_IMU_Init 编译 功能包安装安装ceres-solver-2.0.0 &#xff08;注意安装2.2.0不行&#xff0c;必须要安装2.0.0&#xff09; LI-Init是一种鲁棒、实时的激光雷达惯性系统初始化方法。该方法可校准激光雷达与IMU之间的时间偏移量和外部参数…

unity shaderGraph实例-可交互瀑布

不要问我水在哪里&#xff0c;你自己相像这是一个瀑布&#xff0c;瀑布的效果我还不会做 效果展示 整体结构 这里片元着色器最后输出的baseColor应该是黑色&#xff0c;白色为错误。 各区域内容 区域1 计算球到瀑布的距离&#xff0c;然后减去一个值&#xff0c;实现黑色区域…

UNETR:用于三维医学图像分割的Transformer

论文链接&#xff1a;https://arxiv.org/abs/2103.10504 代码链接&#xff1a; https://monai.io/research/unetr 机构&#xff1a;Vanderbilt University, NVIDIA 最近琢磨不出来怎么把3d体数据和文本在cnn中融合&#xff0c;因为确实存在在2d里面用的transformer用在3d里面…

wpf使用CefSharp.OffScreen模拟网页登录,并获取身份cookie,C#后台执行js

目录 框架信息&#xff1a;MainWindow.xamlMainWindow.xaml.cs爬取逻辑模拟登录拦截请求Cookie获取 CookieVisitorHandle 框架信息&#xff1a; CefSharp.OffScreen.NETCore 119.1.20 MainWindow.xaml <Window x:Class"Wpf_CHZC_Img_Identy_ApiDataGet.MainWindow&qu…

API自动化测试:如何构建高效的测试流程

一、引言 在当前的软件开发环境中&#xff0c;API&#xff08;Application Programming Interface&#xff09;扮演了极为重要的角色&#xff0c;连接着应用的各个部分。对API进行自动化测试能够提高测试效率&#xff0c;降低错误&#xff0c;确保软件产品的质量。本文将通过实…

SpringMVC(三)

十、拦截器 1、拦截器的配置 SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor SpringMVC的拦截器必须在SpringMVC的配置文件中进行配置&#xff1a; <bean class"com.atguigu.interceptor.FirstInterceptor">…

constexpt

constexpt constexpt是C11引入的新的关键字&#xff0c;它用于在编译时而非运行时计算函数或变量的值。这个特性对于提高程序效率和优化代非常有用。 编译时常量和运行时常量 编译时常量&#xff08;Compile-time Constants&#xff09;和运行时常量&#xff08;Runtime Con…

8年经验之谈 —— 如何使用自动化工具编写测试用例?

以下为作者观点&#xff0c;仅供参考&#xff1a; 在快速变化的软件开发领域&#xff0c;保证应用程序的可靠性和质量至关重要。随着应用程序复杂性和规模的不断增加&#xff0c;仅手动测试无法满足行业需求。 这就是测试自动化发挥作用的地方&#xff0c;它使软件测试人员能…

leetcode做题笔记1410. HTML 实体解析器

「HTML 实体解析器」 是一种特殊的解析器&#xff0c;它将 HTML 代码作为输入&#xff0c;并用字符本身替换掉所有这些特殊的字符实体。 HTML 里这些特殊字符和它们对应的字符实体包括&#xff1a; 双引号&#xff1a;字符实体为 &quot; &#xff0c;对应的字符是 "…

python appium 官网下载

找了半天吐了 https://github.com/appium/appium-desktop/releases/tag/v1.22.3-4

Hibernate批量处理数据

概念&#xff1a; 批量处理数据是指在一个事务场景中处理大量数据。 在应用程序中难以避免进行批量操作&#xff0c;Hibernate提供了以下方式进行批量处理数据&#xff1a; (1)使用HQL进行批量操作 数据库层面 executeUpdate() (2)使用JDBC API进行批量操作 数据库层面 …

Vue学习笔记-Object.defineproperty函数

文章目录 前文提要Object.defineProperty作用Object.defineProperty参数使用例图getter&#xff0c;也就是get函数setter&#xff0c;也就是set函数 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 Object.defineProperty作用 当在js中声明了一个变…

王道p150 20.将给定的表达式树转化为等价的中缀表达式(通过括号反应操作符的计算次序)

本题代码如下 void btreetoexp(tree t, char deep) {if (t NULL)return;else if (t->lchild NULL && t->rchild NULL)printf("%c", t->data);//输出操作数&#xff0c;不加括号else {if (deep > 1)printf("(");btreetoexp(t->l…

Rust语言入门教程(二) - 变量与作用域

变量与作用域 变量的声明与初始化 Rust的基本语法格式如下&#xff1a; fn main(){let bunnies 2; }语句以分号结尾&#xff0c;用花括号包含语句块。 Rust的语法其实借鉴了很多其他的语言&#xff0c;比如C语言和Python&#xff0c; 所以变量定义的格式看起来也跟很多我们…

shell 脚本的函数和数组

函数 —— 封装的一个公式&#xff1a;sin、cos、tan —— 函数为脚本的别名 —— 函数就是一个功能模块&#xff0c;在函数中写执行的命令即可&#xff1b;使用函数可以避免代码重复&#xff0c;增加可读性&#xff0c;简化脚本&#xff0c;使用函数可以将大的工程分割为若…

Vue中动态class方法

1.方法一&#xff1a;只需要展示一个class样式&#xff0c;但是动态取值 <div :class"aaa"></div>data:{return () {aaa:colorRed} }.colorRed {color: red; } 2.方法二&#xff1a;表达式判断是否展示class里面的样式 <div :class"{colorRed…

函数与数组

一.函数 1、函数的作用 定义较为复杂的但是需要重复使用的内容&#xff0c;以便再次使用&#xff0c;可以直接调用&#xff0c;节约时间&#xff0c;提高效率。 语句块定义成函数约等于别名&#xff0c;定义函数&#xff0c;再引用函数。 封装的可重复利用的具有特定功能的…

python+django高校科研项目管理系统2u3mx

高校科研项目管理系统采用拟开发的高校科研项目管理系统通过测试,确保在最大负载的情况下稳定运转,各个模块工作正常,具有较高的可用性。系统整体界面简洁美观,用户使用简单,满足用户需要。在因特网发展迅猛的当今社会,高校科研项目管理系统必然会成为在数字信息化建设的一个重…

Linux 查看 CPU 信息相关命令

目录 lscpu top htop lscpu lscpu 命令是用于显示有关 CPU 架构的信息&#xff0c;而不是用于实时监视 CPU 负载。它提供有关 CPU 类型、核心数、线程数、架构等的详细信息。 lscpu top 命令会显示系统的实时状态&#xff0c;包括 CPU 使用率、内存使用率等。按下键盘上的…

一文详解Vue生命周期

Vue是一种流行的用于构建用户界面的渐进式JavaScript框架。Vue框架在开发过程中&#xff0c;特别强调对生命周期的理解和管理。通过使用生命周期钩子函数&#xff0c;开发者能够精确地控制Vue实例的创建、挂载、更新以及销毁过程。本文将对Vue的生命周期进行详细的介绍&#xf…