Web导出Excel表格

背景:

1. 后端主导实现

流程:前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载

场景:大部分场景都有后端来做

2. 前端主导实现

流程:前端获取要导出的数据 -> 常规数据用插件处理成一个excel文件 -> 浏览器下载

场景:少数据量的导出

效果图 :

使用三方插件做需求

  1. 不考虑具体业务 实现一个能跑起来最简单的DEMO [基础环境 + 基础效果]
  2. 在基础DEMO基础上按照实际的业务数据去做对应的修改
pnpm i xlsx
pnpm i @types/xlsx
import { utils, writeFileXLSX } from 'xlsx'const exportToExcel = ()=>{// 1. 创建一个新的工作簿const workbook = utils.book_new()// 2. 创建一个工作表 要求一个对象数组格式(可以根据需要创建多个)const worksheet = utils.json_to_sheet([{ name: '张三', age: 18 },{ name: '李四', age: 28 }])// 3. 把工作表添加到工作簿  Data为工作表名称utils.book_append_sheet(workbook, worksheet, 'Data')// 改写表头utils.sheet_add_aoa(worksheet, [['姓名', '年龄']], { origin: 'A1' })// 4. 导出方法进行导出writeFileXLSX(workbook, '计费规则表.xlsx')
}<el-button @click="exportToExcel">导出Excel</el-button>

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

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

相关文章

函数栈帧的创建与销毁

我是目录 环境理解栈帧函数栈帧图预备知识寄存器MOV 指令SUB 指令PUSH 指令POP 指令LEA 指令CALL 指令REP STOS 指令 一个简单的C程序栈帧创建栈帧销毁 如何传参数值参数变量参数 如何返回值数值返回变量返回 环境 集成环境&#xff1a;VS2022 x86 编辑语言&#xff1a;C 汇…

服务端高并发分布式结构进阶之路

序言 在技术求知的旅途中&#xff0c;鉴于多数读者缺乏在中大型系统实践中的亲身体验&#xff0c;难以从宏观角度把握某些概念&#xff0c;因此&#xff0c;本文特选取“电子商务应用”作为实例&#xff0c;详细阐述从百级至千万级并发场景下服务端架构的逐步演变历程。同时&am…

Linux:版本控制器git和调试工具cgdb

✨✨所属专栏&#xff1a;Linux✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 版本控制器 为了能够更⽅便我们管理这些不同版本的⽂件&#xff0c;便有了版本控制器。所谓的版本控制器&#xff0c;就是能让你了解到⼀个⽂件的历史&#xff0c;以及它的发展过程的系统。通俗的讲就是⼀…

【0x001C】HCI_Write_Page_Scan_Activity详解

目录 一、命令概述 二、命令格式和参数说明 2.1. HCI_Write_Page_Scan_Activity命令格式 2.2. Page_Scan_Interval 2.3. Page_Scan_Window 三、响应事件及参数说明 3.1. HCI_Command_Complete事件 3.2. Status 3.3. 示例 四、命令执行流程 4.1. 命令发起阶段(主机端…

云原生之运维监控实践-使用Prometheus与Grafana实现对Nginx和Nacos服务的监测

背景 如果你要为应用程序构建规范或用户故事&#xff0c;那么务必先把应用程序每个组件的监控指标考虑进来&#xff0c;千万不要等到项目结束或部署之前再做这件事情。——《Prometheus监控实战》 去年写了一篇在Docker环境下部署若依微服务ruoyi-cloud项目的文章&#xff0c;当…

突破工业管理新高度:AI多模态引擎赋能设备维护管理

结合AI技术&#xff0c;可以帮助企业提升设备维护效率和管理复杂信息的能力。以下是一个详细流程和思路&#xff1a; 1. 项目背景概述 在高端制造业领域&#xff0c;如飞机、轮船、光刻机等设备的操作手册及零件图纸涉及大量的零配件信息和操作维护流程。传统方式难以高效管理…

C++重写和重定义和重载

重写 概念&#xff1a; 重写发生在类的继承体系中&#xff0c;是指在派生类中重新定义基类中已声明为虚函数&#xff08;使用 virtual 关键字修饰&#xff09;的函数。其目的是让派生类根据自身的需求对基类的虚函数提供不同的具体实现&#xff0c;从而实现运行时多态。 规则及…

centos7在使用yum源安装依赖时报错

1.在centos7中使用yum命令时候报错如下类似信息&#xff1a; Loading mirror speeds from cached hostfile Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infrastock error was 14: curl#6 - "Could not resol…

小版本大不同 | Navicat 17 新增 TiDB 功能

近日&#xff0c;Navicat 17 迎来了小版本更新。此次版本新增了对 PingCap 公司的 TiDB 开源分布式关系型数据库的支持&#xff0c;进一步拓展了 Navicat 的兼容边界。即日起&#xff0c;Navicat 17 所有用户可免费升级至最新版本&#xff0c;通过 Navicat 工具实现 TiDB 数据库…

python 编程 在 Matplotlib 中 默认预定的所有颜色,可以使用多种方法来指定颜色,包括预定义的颜色名称、十六进制颜色代码、

在 Matplotlib 中&#xff0c;可以使用多种方法来指定颜色&#xff0c;包括预定义的颜色名称、十六进制颜色代码、RGB 元组等。如果你想要一个比较深的颜色&#xff0c;你可以选择一些预定义的深色名称&#xff0c;或者使用较低的亮度值来定义自己的颜色。 以下是一些预定义的…

【基于Java Springboot敬老院管理系统

一、作品包含 源码数据库设计文档万字全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据库…

JRebel插件,全教程

JRebel是一套JavaEE开发工具。相信大家都用过&#xff0c;但是频繁的需要激活&#xff0c;已经让java开发者烦不胜烦。 本篇文章来给大家解决这个烦恼。当然没有用过的同行&#xff0c;我也跟大家介绍一下: 简单来说&#xff0c;Jrebel 可快速实现热部署&#xff0c;在本地开发…

PPPoE技术详解

一 &#xff0c; 背景 随着运营商对宽带接入技术要求的不断提高&#xff0c;以xDSL&#xff0c;CableModem和以太网为主的几种宽带接入技术在用户管理和计费等方面的不足开始显露&#xff0c;已无法满足运营商的需求。 在众多的技术中&#xff0c;以太网接入方式经济实惠&…

[JAVA]MyBatis环境配置介绍

什么是MyBatis环境配置&#xff1f; MyBatis是基于JDBC对数据库进行操作&#xff0c;在我们进行数据操作时&#xff0c;我们需要告诉MyBatis我们连接哪个数据库&#xff0c;ip地址&#xff0c;数据库名称&#xff0c;用户名密码等。以此来进行环境配置。 首先&#xff0c;MyB…

Javascirpt时区——脱坑指南

最近业务反馈了一个约课功能的问题&#xff0c;澳大利亚的用户反馈&#xff0c;无法进行选课。排查之后发现是时区不对引起的&#xff0c;由于时区的偏差已经超过时间&#xff0c;导致无法选课。 这里对js中处理时区的问题做一些总结。 时区 时区&#xff08;Time Zone&#xf…

不用来回切换,一个界面管理多个微信

你是不是也有多个微信号需要管理&#xff1f; 是不是也觉得频繁切换账号很麻烦&#xff1f; 是不是也想提升多账号管理的效率&#xff1f; 在工作中&#xff0c;好的辅助工具&#xff0c;能让我们的效率加倍增长&#xff01; 今天&#xff0c; 就给大家分享一个多微管理工具…

每日OJ题_牛客_AB32【模板】哈夫曼编码_C++_Java

目录 牛客_AB32【模板】哈夫曼编码 题目解析 C代码 Java代码 牛客_AB32【模板】哈夫曼编码 【模板】哈夫曼编码_牛客题霸_牛客网 描述&#xff1a; 给出一个有n种字符组成的字符串&#xff0c;其中第ii种字符出现的次数为ai​。请你对该字符串应用哈夫曼编码&#xff0c;…

UDP协议

​ UDP协议 前置知识一、应用层的进程为什么要bind端口号二、如何确定网络中的一个进程三、进程 服务 协议 端口之间的关系四、常见的协议对应的端口五、一些命令六、一个进程能不能绑定多个端口号&#xff0c;一个端口号能不能被多个进程绑定七、对任何一个协议报文的认识 UD…

KkFileView4.1.0部署文档--linux

先看下官方文档&#xff1a;kkFileView - 在线文件预览 环境要求中的JDK8如果没有的&#xff0c;需先安装JDK8&#xff0c;这里不做展示。 第二个office相关环境要求在linux中会自动下载安装&#xff0c;不用管。 1、下载地址 Linux 或 MacOS 版&#xff1a; https://kkfil…

[论文笔记]An LLM Compiler for Parallel Function Calling

引言 今天带来一篇优化函数调用的论文笔记——An LLM Compiler for Parallel Function Calling。 为了简单&#xff0c;下文中以翻译的口吻记录&#xff0c;比如替换"作者"为"我们"。 当前的函数(工具)调用方法通常需要对每个函数进行顺序推理和操作&…