Web导出Excel表格

news/2024/11/21 23:21:48/

背景:

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.ppmy.cn/news/1548877.html

相关文章

实验室管理软件:Spring Boot技术构建

3系统分析 3.1可行性分析 通过对本实验室管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本实验室管理系统采用SSM框架&#xff0c;JAVA作为开发语言&a…

【jvm】StringTable为什么要调整

目录 1. 永久代内存限制与回收效率2. 堆内存的优势3. JDK版本的演进4. 实际应用的考虑 1. 永久代内存限制与回收效率 1.内存限制&#xff1a;在JDK 6及之前的版本中&#xff0c;StringTable位于永久代&#xff08;PermGen space&#xff09;中。然而&#xff0c;永久代的内存空…

linux安装mysql57——笔记

rpm -qa | grep mysql有东西就rpm -e 文件名 下载 wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm安装 yum -y install mysql57-community-release-el7-10.noarch.rpm安装 yum -y install mysql-community-server如果出现Error: GPG c…

力扣题解(新增道路查询后的最短距离II)

3244. 新增道路查询后的最短距离 II 给你一个整数 n 和一个二维整数数组 queries。 有 n 个城市&#xff0c;编号从 0 到 n - 1。初始时&#xff0c;每个城市 i 都有一条单向道路通往城市 i 1&#xff08; 0 < i < n - 1&#xff09;。 queries[i] [ui, vi] 表示新建…

基于Java的旅游类小程序开发与优化

基于Java的旅游类小程序开发与优化 第一章 绪论 1.1 研究背景及意义 随着移动互联网的迅猛发展&#xff0c;消费者对旅游信息获取的便捷性、个性化需求日益增长。旅游类小程序以其即点即用的便捷性和丰富的功能&#xff0c;逐渐成为满足用户旅游需求的重要工具。本研究旨在探…

CSS 样式的优先级?

在CSS中&#xff0c;样式的优先级决定了当多个样式规则应用于同一个元素时&#xff0c;哪个样式会被最终使用。以下是一些决定CSS样式优先级的规则&#xff1a; 就近原则&#xff1a; 最后应用在元素上的样式具有最高优先级。这意味着如果两个选择器都应用了相同的样式&#xf…

数据结构_图的遍历

深度优先搜索遍历 遍历思想 邻接矩阵上的遍历算法 void Map::DFSTraverse() {int i, v;for (i 0; i < MaxLen; i){visited[i] false;}for (i 0; i < Vexnum; i){// 如果顶点未访问&#xff0c;则进行深度优先搜索if (visited[i] false){DFS(i);}}cout << endl…

【10分钟学习Vue自定义指令开发】鼠标放置提示指令

描述 自定义指令 v-tooltip mounted(el, binding)&#xff1a;当元素被挂载到DOM上时&#xff0c;这个钩子会被调用。 el 是指令绑定的元素&#xff0c;binding 包含了指令的值&#xff0c;即 binding.value&#xff0c;这里是 clickOutside 字符串。tooltip 变量用于存储创建…