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

vue到出excel

安装

npm install exceljs
npm install file-saver
<template><button @click="dade66">导出 66</button>
</template><script>
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';export default {data() {return {data: [{ name: '张三', age: 25, gender: '男' },{ name: '李四', age: 30, gender: '女' },],};},methods: {async dade66() {const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('Sheet1');// 设置表头worksheet.columns = [{ header: '姓名', key: 'name' },{ header: '年龄', key: 'age' },{ header: '性别', key: 'gender' },];// 添加数据this.data.forEach(item => {worksheet.addRow({ name: item.name, age: item.age, gender: item.gender });});// 生成 Excel 文件并保存await workbook.xlsx.writeBuffer().then(buffer => {const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });saveAs(blob, 'exported_data.xlsx');});},},
};
</script>

<template><button @click="dade66">导出 66</button>
</template><script>
// npm install exceljs
// npm install file-saver
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';export default {data() {return {data: [{ name: '张三', age: 25, gender: '男' },{ name: '李四', age: 30, gender: '女' },],};},methods: {async dade66() {const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('Sheet1');// 设置表头worksheet.columns = [{ header: '姓名', key: 'name' },{ header: '年龄', key: 'age' },{ header: '性别', key: 'gender' },];// 添加数据this.data.forEach(item => {worksheet.addRow({ name: item.name, age: item.age, gender: item.gender });});// 冻结表头(第一行)worksheet.views = [{state: 'frozen',ySplit: 1}];// 设置列宽worksheet.getColumn(1).width = 15; // 假设设置第一列(姓名列)宽度为 15worksheet.getColumn(2).width = 10; // 假设设置第二列(年龄列)宽度为 10worksheet.getColumn(3).width = 10; // 假设设置第三列(性别列)宽度为 10// 设置行高worksheet.getRow(1).height = 18; // 设置第一行(表头行)高度为 25worksheet.eachRow((row, rowNumber) => {if (rowNumber > 1) {row.height = 18; // 设置数据行高度为 20}});// 设置居中对齐for (let rowNumber = 1; rowNumber <= worksheet.rowCount; rowNumber++) {const row = worksheet.getRow(rowNumber);for (let columnNumber = 1; columnNumber <= worksheet.columnCount; columnNumber++) {const cell = row.getCell(columnNumber);cell.alignment = { vertical: 'middle', horizontal: 'center' };}}// 合并单元格worksheet.mergeCells('A5:C5'); // 合并第一行的 A 到 C 列worksheet.mergeCells('A6:C7'); // 跨行合并// 生成 Excel 文件并保存await workbook.xlsx.writeBuffer().then(buffer => {const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });saveAs(blob, 'exported_data.xlsx');});},},
};
</script>

在这里插入图片描述

相关文章:

vue到出excel

安装 npm install exceljs npm install file-saver<template><button click"dade66">导出 66</button> </template><script> import ExcelJS from exceljs; import { saveAs } from file-saver;export default {data() {return {data…...

【延时队列的实现方式】

文章目录 延时队列JDK自带的延时队列实现Redis实现延迟队列RabbitMQ 延时队列 延时队列 延时队列是一种特殊类型的队列&#xff0c;它允许元素在特定时间间隔后才能被处理。这种队列在处理具有延迟需求的任务时非常有用&#xff0c;例如定时任务、事件驱动系统等 延时队列在项…...

Fyne ( go跨平台GUI )中文文档- 扩展Fyne (七)

本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16 及更高版本, ide为goland2021.2 这是一个系列文章&#xff1a; Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne ( go跨平台GUI…...

Qt (19)【Qt 线程安全 | 互斥锁QMutex QMutexLocker | 条件变量 | 信号量】

阅读导航 引言一、互斥锁1. QMutex&#xff08;1&#xff09;基本概念&#xff08;2&#xff09;使用示例基本需求⭕thread.h⭕thread.cpp⭕widget.h⭕widget.cpp 2. QMutexLocker&#xff08;1&#xff09;基本概念&#xff08;2&#xff09;使用示例 3. QReadWriteLocker、QR…...

Java语法-类和对象(上)

1. 面向对象的初步认识 1.1 什么是面向对象 概念: Java是一门纯面向对象的语言(Object Oriented Program&#xff0c;简称OOP)&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。 1.2 面向对象VS面向过程 如:洗衣服 面向过程: 注重的是洗衣服的过程,少了一个环节也不…...

Presto如何配置资源队列或资源组

Presto的任务队列配置主要涉及到查询队列和资源组的配置&#xff0c;这些配置通常用于管理Presto集群中的查询执行和资源分配。但是注意这两个东西是共存&#xff0c;互补的关系&#xff0c;并不需要纠结那种配置方式更加出色 一、查询队列配置 Presto的查询队列配置主要通过…...

828华为云征文|使用Flexus X实例集成ES搜索引擎

目录 一、应用场景 1.1 Flexus X实例概述 1.2 ES搜索引擎 二、安装相关服务 2.1 安装Elasticsearch7.17.0 2.2 安装kibana7.17.0 三、开通安全组规则 四、整体感受 4.1 Flexus X实例 4.2 使用感觉 一、应用场景 1.1 Flexus X实例概述 Flexus X实例是华为云推出的一款…...

【设计模式-访问者模式】

定义 访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;允许你在不修改已有类的情况下向这些类添加新的功能或行为。它通过将操作的执行逻辑从对象的类中分离出来&#xff0c;使得你可以在保持类的封闭性&#xff08;符合开闭原则&#xff…...

一元运算符(自增自减)

一、一元运算符 一元运算符&#xff0c;只需要一个操作数 1. 正号 正号不会对数字产生任何影响 2.-负号 负号可以对数字进行负号的取反 对于非Number的值&#xff0c;会将先转换为Number&#xff0c;在进行运算: 可以对一个其他的数据类型使用&#xff0c;来将其转换为n…...

gitlab/极狐-离线包下载地址

如果想要使用Gitlab/极狐进行数据的恢复&#xff0c;只能使用相同版本或者相近版本的安装包&#xff0c;因此有时候需要到它的官网上下载对应版本的安装包&#xff0c;以下是我收集到的对应地址的下载路径&#xff1a; Gitlab Gitlab离线库&#xff0c; https://packages.gitl…...

C++——输入三个整数,按照由小到大的顺序输出。用指针方法处理。

没注释的源代码 #include <iostream> using namespace std; void swap(int *m,int *n); int main() { int a,b,c; int *p1,*p2,*p3; cout<<"请输入三个整数&#xff1a;"<<endl; cin>>a>>b>>c; p1&a;p2&b;p3&c;…...

【Java8 重要特性】Lambda 表达式

文章目录 Lambda函数式接口Lambda 规则规范简化过程改写 Arrays.setAll()改写 Arrays.sort() forEach循环 list 集合循环 list 集合并输出对象信息循环 Map 集合 方法引用和构造器引用方法引用构造器引用 Lambda Lambda是一个匿名函数&#xff0c;我们可以将Lambda表达式理解为…...

word2vec--CBOW与Skip-Gram 两种模型

Word2Vec 是一种流行的用于生成词嵌入&#xff08;Word Embeddings&#xff09;的无监督学习模型&#xff0c;它由 Google 的一个团队在 2013 年提出。它的主要目的是将单词映射到一个连续的向量空间&#xff0c;使得语义相似的单词在这个空间中靠得更近。 Word2Vec 有两种主要…...

iOS六大设计原则设计模式

六大设计原则&#xff1a; 一、单一职责原则 一个类或者模块只负责完成一个职责或者功能。 类似于&#xff1a;UIView 和 CALayer 二、开放封闭原则 对扩展开放&#xff0c;对修改封闭。 我们要尽量通过扩展软件实体来解决需求变化&#xff0c;而不是通过修改已有的代码来…...

nacos 集群搭建

主机准备 IProle192.168.142.155slave02192.168.142.156slave192.168.142.157master 三台主机上分别构建 mysql 镜像 FROM mysql:8.0.31 ADD https://raw.githubusercontent.com/alibaba/nacos/develop/distribution/conf/mysql-schema.sql /docker-entrypoint-initdb.d/nac…...

STM32快速复习(十二)FLASH闪存的读写

文章目录 一、FLASH是什么&#xff1f;FLASH的结构&#xff1f;二、使用步骤1.标准库函数2.示例函数 总结 一、FLASH是什么&#xff1f;FLASH的结构&#xff1f; 1、FLASH简介 &#xff08;1&#xff09;STM32F1系列的FLASH包含程序存储器、系统存储器和选项字节三个部分&…...

漏洞扫描工具使用

首先把补丁的两个文件复制下来替换原文件 找到C:\ProgramData\Acunetix\shared\license然后替换 然后打开漏扫工具并刷新页面 然后添加要扫描的网站 等他扫描完成 扫描完成就可以生成报告了 一共五十多页的报告...

C++ | Leetcode C++题解之第424题替换后的最长重复字符

题目&#xff1a; 题解&#xff1a; class Solution { public:int characterReplacement(string s, int k) {vector<int> num(26);int n s.length();int maxn 0;int left 0, right 0;while (right < n) {num[s[right] - A];maxn max(maxn, num[s[right] - A]);i…...

利士策分享,动摇时刻的自我救赎

利士策分享&#xff0c;动摇时刻的自我救赎 在人生的长河中&#xff0c;我们每个人都会面临各种挑战与抉择&#xff0c; 那些让人心生动摇的瞬间&#xff0c;如同夜空中偶尔掠过的乌云&#xff0c;遮蔽了前行的星光。 但正是这些动摇&#xff0c;构成了我们成长的轨迹&#x…...

动手学深度学习(李沐)PyTorch 第 1 章 引言

在线电子书 深度学习介绍 安装 使用conda环境 conda create -n d2l-zh python3.8 pip安装需要的包 pip install jupyter d2l torch torchvision下载代码并执行 wget https://zh-v2.d2l.ai/d2l-zh.zip unzip d2l-zh.zip jupyter notebookpip install rise如果不想使用jupyt…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...