当前位置: 首页 > news >正文

导出excel功能,前端的解决方案

import { utils, writeFileXLSX } from 'xlsx'
// 导出excel
async exportToExcel() {// 获取要导出的业务数据(这里的接口自己改成实际使用的接口)const res = await getRuleListAPI(this.params)// 表头英文字段key(这里的数据改成接口返回的实际数据,原则是即是用来下载成export的表头又是后台返回的数据,这样才好从后台的数据里面分离出我们要的数据。)const tableHeaderKeys = ['ruleNumber', 'ruleName', 'freeDuration', 'chargeCeiling', 'chargeType', 'ruleNameView']// 表头中文字段value(这里改成需要展示的数据,一般来说和上面的英文的都是对应关系。用于表格输出后的表头)const tableHeaderValues = ['计费规则编号', '计费规则名称', '免费时长(分钟)', '收费上线(元)', '计费方式', '计费规则']// 以excel表格的顺序调整后端数据const sheetData = res.data.rows.map((item) => {const obj = {}tableHeaderKeys.forEach(key => {obj[key] = item[key]})return obj})// 创建一个工作表const worksheet = utils.json_to_sheet(sheetData)// 创建一个新的工作簿const workbook = utils.book_new()// 把工作表添加到工作簿(这个Data是表名,可以自己改)utils.book_append_sheet(workbook, worksheet, 'Data')// 改写表头(origin是起始位置的意思)utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })// 这个最后的是工作簿的名称,即文件名。writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
}

这个xlsx需要npm i,官网放在这Data Export | SheetJS Community Edition

一般下载的命令是

npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

该修改的,都用小括号括起来了。这个csdn工具的原因,只能写成这样。

相关文章:

导出excel功能,前端的解决方案

import { utils, writeFileXLSX } from xlsx // 导出excel async exportToExcel() {// 获取要导出的业务数据(这里的接口自己改成实际使用的接口)const res await getRuleListAPI(this.params)// 表头英文字段key(这里的数据改成接口返回的实…...

【lesson24】MySQL索引的理解

文章目录 建立测试表插入多条记录查看插入结果中断一下---为何IO交互要是 Page重谈page理解单个page理解多个page 页目录单页情况多页情况复盘一下InnoDB 在建立索引结构来管理数据的时候,其他数据结构为何不行?B vs B聚簇索引 VS 非聚簇索引 建立测试表…...

Oracle篇—分区索引的重建和管理(第三篇,总共五篇)

☘️博主介绍☘️: ✨又是一天没白过,我是奈斯,DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux,也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章,并且也会默默的点赞收藏加关注❣…...

前端大厂面试题探索编辑部——第一期

目录 简介 题目 单选题 题解 A选项的Content-Security-Policy http-equiv属性 content属性 B选项的CSRF 使用CSRF Token 验证Referer和Origin头 C选项的HTTP Only D选项的防止SQL注入 输入验证和转义 简介 这个是一个长系列,我会以题目为导向&#xff…...

图扑 HT UI 5.0 全新升级,开箱即用!

为顺应数字时代的不断发展,图扑 HT UI 5.0 在原有功能强大的界面组件库的基础上进行了全面升级,融入了更先进的技术、创新的设计理念以及更加智能的功能。HT UI 5.0 使用户体验更为直观、个性化,并在性能、稳定性和安全性等方面达到新的高度。…...

数据结构----链表介绍、模拟实现链表、链表的使用

文章目录 1. ArrayList存在的问题2. 链表定义2.1 链表的概念及结构2.2 链表的组合类型 3. 链表的实现3.1 单向、不带头、非循环链表的实现3.2 双向、不带头节点、非循环链表的实现 4.LinkedList的使用4.1 什么是LinkedList4.2 LinkedList的使用4.2.1. LinkedList的构造4.2.2. L…...

微信小程序如何控制元素的显示和隐藏

目录 方式一:display 方式二:wx:if 有时在微信小程序元素的显示需要通过特定的条件,比如组件的显示,通常需要在主界面有指定操作。可以通过以下两种方式控制元素的显示和隐藏。 方式一:display 在wxml或者wxss中设置display样式可以控制元素显示情况,元素默认显示,可…...

解决ssh: connect to host github.com port 22: Connection timed out

当连接 GitHub 时无法连接到 22 端口时,可以尝试将端口更换为 443 首先,尝试使用以下命令从 GitHub 克隆仓库: $ git clone gitgithub.com:xxxxx/xxxx.git my-awesome-proj如果出现以下错误信息: Cloning into my-awesome-proj…...

idea 创建 spring boot

1.创建步骤 2. 编码添加 2.1 这是自动生成的启动函数 package com.example.comxjctest4;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;SpringBootApplication public class Application {publi…...

【智能家居入门之微信小程序控制下位机】(STM32、ONENET云平台、微信小程序、HTTP协议)

实现微信小程序控制单片机外设动作 一、使用ONENET可视化组件控制单片机外设动作二、使用微信小程序控制单片机外设动作三、总结 本篇博客话接上文: https://blog.csdn.net/m0_71523511/article/details/135892908 上一篇博客实现了微信小程序接收单片机上传的数据…...

07.领域驱动设计:了解3种常见微服务架构模型的对比和分析

目录 1、概述 2、整洁架构 3、六边形架构 4、三种微服务架构模型的对比和分析 5、从三种架构模型看中台和微服务设计 5.1 中台建设要聚焦领域模型 5.2 微服务要有合理的架构分层 5.2.1 项目级微服务 5.2.2 企业级中台微服务 5.3 应用和资源的解耦与适配 6、总结 1、概…...

设计模式——模板方法模式(Template Method Pattern)

概述 模板方法模式:定义一个操作中算法的框架,而将一些步骤延迟到子类中。模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。模板方法模式是一种基于继承的代码复用技术,它是一种类行为型模式。模板方法模式是结…...

07. STP的基本配置

文章目录 一. 初识STP1.1. STP概述1.2. STP的出现1.3. STP的作用1.4. STP的专业术语1.5. BPDU的报文格式1.6. STP的选择原则(1)选择根桥网桥原则(2)选择根端口原则 1.7. 端口状态1.8. STP报文类型1.9. STP的收敛时间 二. 实验专题…...

oracle分区范围修改与数据迁移处理

背景 由于对应用上线后流量越来越大,原来的按年自动分区性能跟不上,因此决定改成按月自动分区,同时将原有分区数据重新迁移到新的分区 步骤 修改表分区为一个月一个分区 alter table my_table set INTERVAL (NUMTOYMINTERVAL(1, month));…...

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测 目录 回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSSVM【24年…...

SeaTunnel Web安装 一把成

安装相关jar包,以及SeaTunnel 和Web 打成的包,可以直接使用,但是需要安装MySQL客户端的分享: 链接:https://pan.baidu.com/s/1qrt1RAX38SgIpNklbQJ7pA 提取码:0kmf 1. 环境准备 环境名称版本系统环境C…...

对话泛能网程路:能源产业互联网,行至中程

泛能网的能源产业互联网的标杆价值还不仅于此。其在产业互联之外,也更大的特殊性在于其也更在成为整个碳市场的“辅助运营商”,包括电力、碳等一系列被泛能网帮助企业改造和沉淀的要素资产,都在构成着碳交易市场的未来底层。 这恰是产业互联…...

Doris简介及单机部署(超详细)

文章目录 一、Doris简介1、Doris介绍2、Doris架构 二、Doris单机部署(Centos7.9)1、下载Doris2、准备环境3、安装部署3.1 创建存储目录3.2 配置 FE3.3 启动 FE3.4 查看 FE 运行状态3.5 配置 BE3.6 启动 BE3.7 添加 BE 节点到集群3.8 查看 BE 运行状态3.9…...

Pytest 识别case规则

一、Python测试框架,主要特点有以下几点: 简单灵活,容易上手;支持参数化;能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/appnium等自动化测试、接口自动化测试(pytestrequests…...

gorm+mysql查询/修改json列相关操作汇总

目录 具体操作 1,查询JSON段落指定key的值是否有等于value的 或 指定keyvalue的数据记录 2,查询JSON段落中price>19的记录 3,查询JSON段中key为k0的记录 4、JSON段落中提取指定键值对到指定结构 5,查询JSON数组是否包含…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...

浅谈不同二分算法的查找情况

二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况&#xf…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型(Vision-Language Models, VLMs),为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展,机器人仍难以胜任复杂的长时程任务(如家具装配),主要受限于人…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...