xlsx 导出 (简单使用)

news2024/10/7 12:27:17

下载数据为xlsx

  1. 安装

    npm install xlsx
  2. 在src下创建文件utils文件夹,在utils文件夹下创建XLSX.js文件

    // 下载excel功能
    import * as XLSX from 'xlsx'
    
    /**
     * @param dataList 表格数据内容  array
     * @param fileName 文件标题。必须以 .xlsx结尾
     */
    export const downloadXlsx = (dataList, fileName) => {
        const stringToBuff = str => {
            let buf = new ArrayBuffer(str.length)
            let view = new Uint8Array(buf)
            for (let i = 0; i !== str.length; ++i) {
                view[i] = str.charCodeAt(i) & 0xff
            }
            return buf
        };
        // 创建表格
        let workbook = XLSX.utils.book_new();
        let worksheet = XLSX.utils.aoa_to_sheet(dataList);
        XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');
    
        // 创建二进制对象写入转换好的字节流
        let xlsxBlob = new Blob(
            [
                stringToBuff(
                    XLSX.write(workbook, {
                        bookType: 'xlsx',
                        bookSST: false,
                        type: 'binary'
                    })
                )
            ],
            { type: '' }
        );
    
        const a = document.createElement('a');
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        a.href = URL.createObjectURL(xlsxBlob) ;// 创建对象超链接
        a.download = fileName
        a.click()
    }
    

  3. 使用

    import { downloadXlsx } from "@/utils/XLSX";
    exportExcel() {
          const data = [
            { name: "zhangsan", age: "12" },
            { name: "wangwu", age: "14" },
          ];
          let datalist = []; //导出表格表头
          datalist.push(["姓名", "年龄"]);
          data.forEach((item) => {
            datalist.push([item.name, item.age]);
          });
          //导出插件使用
          downloadXlsx(datalist, "人员.xlsx");
      }

4.效果

 

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

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

相关文章

Linux网络——Shell编程之快捷命令

Linux网络——Shell编程之快捷命令 一、快捷排序 — sort 命令二、快捷去重 — uniq 命令三、快捷替换 — tr 命令四、快速裁剪 — cut 命令五、文件拆分 — split 命令六、文件合并 —paste 命令七、变量扫描器 — eval 命令 一、快捷排序 — sort 命令 sort命令用于以行为单位…

五步看平台,选好安全的MT4交易外汇平台

在选择MT4外汇交易平台时,如何避免不正规的平台?以下是5招教你远离不正规MT4交易外汇平台。 1. 查看平台是否取得合法许可证 首要考虑的是该平台是否取得了合法的许可证。许可证是证明一个交易平台合法的最重要证据,因此务必在选择时核查该平台的许可证…

得物深入浅出解析JVM中的Safepoint

1.初识Safepoint-GC中的Safepoint 最早接触JVM中的安全点概念是在读《深入理解Java虚拟机》那本书垃圾回收器章节的内容时。相信大部分人也一样,都是通过这样的方式第一次对安全点有了初步认识。不妨,先复习一下《深入理解Java虚拟机》书中安全点那一章…

你真的了解Java类加载机制吗?

大家好,我是小米,一个喜欢分享技术的程序员。今天我来给大家简述一下Java类加载模型。 在Java中,类的加载过程是在程序运行时动态进行的。Java的类加载模型可以分为三个步骤:加载、连接和初始化。 类加载过程:加载 首…

Android面试指南:谈谈你对Flutter的理解

一、Flutter简介 Flutter是由Google开发的一种基于Dar编程语言的移动应用开发框架。可以帮助开发在构建高性能、美观、灵活的应用程序,从而实现跨平台开发,适用于与Android、ios、web、windows、macOS和linux等多个平台。 二、学习Flutter有什么优势 …

Java EE企业级应用开发(SSM)第11章

第11章SSM框架 一.预习笔记 1.准备jar包(注意版本) Spring一套包 Springmvc两个 Mybatis一个 Spring整合mybatis一个 Jstl一个用于jsp显示数据 Mysql一个用于访问数据库 Gson一个用于返回json数据 2.准备配置文件web.xml applicationContext.xml…

MySQL Client

MySQL客户端很多,自身携带的一些客户端工具也需要了解,方便快速测试。 MySQL Shell MySQL Shell Commands。 执行SQL语句时,必须切换到SQL模式。Shell指令较少,同时可以使用Python \py模式。 MySQL Shell所有的命令后面不需要加…

TCP通道和共享链路通道

推送SDK为了适应不同的场景和需求,对于一些对消息及时性、可靠性、自定义性要求高的应用,如即时通讯、社交、游戏等,可能更倾向于使用TCP通道,对于一些对消息节省流量、耗电量、兼容性要求高的应用,如新闻、天气、股票…

【软件工程】自动化测试保证卓越软件工程能力(3)

测试目标定义 对照目标系统,如下: 给出自动化测试平台目标如下: Case levelCase briefReport send toOVERALLUser 1 -> Process -> Customer 1BossLevel 1User 1 -> Process -> Customer 1 User 1 -> Process -> Custome…

AI自动写文章工具-ai文章智能生成器

随着人工智能技术的快速发展,越来越多的应用开始使用AI自动生成文章的功能,实现全自动、高质量和高效率的文章写作。本文将从全自动批量生成、没有错别字和标准语法、自动插入图片以及严格按照标准格式结构生成几个方面,展开对AI自动生成文章…

数据分析04——Pandas简介/Series对象/DataFrame对象

1、Pandas简介: Pandas是基于NumPy开发的数据分析三大剑客之一,Python数据分析的核心库提供快速、灵活、明确的数据结构Series对象:一维数组结构,由index和value构成DataFrame对象:二维数组结构,由index、…

MySQL基础(二十五)InnoDB数据存储结构

1 数据库的存储结构:页 索引结构给我们提供了高效的索引方式,不过索引信息以及数据记录都是保存在文件上的,确切说是存储在页结构中。另一方面,索引是在存储引擎中实现的,MySQL服务器上的存储引擎负责对表中数据的读取和写入工作…

在外Windows公网远程连接MongoDB数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 转载自远程内网穿透的文章:公网远…

友元函数,友元类,内部类及其之间的关系,匿名对象等

TIPS 当某一个类当中有自定义类型成员变量的时候,然后对该类的实例化对象调用函数的时候走初始化列表的时候,如果说要对自定义类型成员变量进行初始化列表初始化的时候,尽管那个自定义类型它的构造函数是没有参数的,但是此时括号…

数据剖析更灵活、更快捷,火山引擎 DataLeap 动态探查全面升级

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 近期,火山引擎 DataLeap 上线“动态探查”能力,为用户提供全局数据视角、完善的抽样策略,提高数据探查的灵活度以及响应速率。 …

【STL模版库】string类:模拟实现string类

一、成员变量 private:char *_str;size_t _size;size_t _capacity;public:static size_t npos -1; //编译报错,不能在类中初始化const static size_t npos -1; //[1]const char* c_str() const{ //[2]return _str;}size_t size() const{return _size;} size_t ca…

智慧水务云平台助力“十四五”水安全保障规划!

一、《“十四五”水安全保障规划》 水利部印发《“十四五”水安全保障规划》,规划中指出,“十四五”期间要抓好8个方面重点任务。 一是实施国家节水行动,强化水资源刚性约束。 二是加强重大水资源工程建设,提高水资源优化配置能…

Mongo执行计划explain分析

3.0+的explain有三种模式,分别是:queryPlanner、executionStats、allPlansExecution。现实开发中,常用的是executionStats模式。 1.使用方式 在查询语句后面加上explain("executionStats") db.user.find({"roleCodes":"xsbj","status&…

详细操作Selenium自动化测试之中的断言

Selenium常用的断言包括 页面属性断言:断言标题、url或页面源码中是否包含或不包含特定字符元素存在断言:断言指定元素存在图片及链接断言:断言图片正常显示、链接可以正常打开 页面属性断言 这是最常用的断言方式,可以用来断言…

TTL转HDMI 1.4,性能提升,pin to pin 芯片LT8618SXB

1. 描述 LT8618SX 是 Lontium 的低功耗版本 HDMI 发射器,其基于 ClearEdgeTM 技术。它支持 24 位色深 HDMI 1.4(高清多媒体接口)规范。它们与 Lontium 的第一代 HDMI 发射器 LT8618EX 完全向后兼容。 LT8618SX 是一款高性能、低功耗器件…