vue到出excel

news2024/11/15 21:43:16

安装

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; // 假设设置第一列(姓名列)宽度为 15
	    worksheet.getColumn(2).width = 10; // 假设设置第二列(年龄列)宽度为 10
	    worksheet.getColumn(3).width = 10; // 假设设置第三列(性别列)宽度为 10
	   
	    // 设置行高
		worksheet.getRow(1).height = 18; // 设置第一行(表头行)高度为 25
		worksheet.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>

在这里插入图片描述

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

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

相关文章

Unity多语言插件I2 Localization国际化应用

【就不收费了&#xff0c;要个关注不过分吧】 【图片来自插件官网&#xff0c;侵删】 前言 目前游戏往往都不会仅局限于国内语言&#xff0c;为了适应产品都要做国际化适配&#xff0c;因此会用到这个插件&#xff0c;这个插件要付费&#xff0c;因此请前往unity官网进行下载…

Windows系统设置定时任务,周期性执行.bat文件

通过.bat清除注册表项 在 Windows 系统中&#xff0c;.bat 文件&#xff08;批处理文件&#xff09;是一个包含一系列命令的文本文件。这些命令会被 Windows 命令解释器 (cmd.exe) 依次执行。 你可以把它想象成一个简单的程序&#xff0c;但它不像 C 或 Python 那样需要编译&a…

Go容器化微服务系统实战

1-1 本课的go微服务有什么不同&#xff1f; 聚焦于容器化可观测的购物微服务系统实战&#xff0c;通过介绍Go语言的应用趋势、容器化优势及微服务适用性&#xff0c;旨在解决学习微服务过程中遇到的难点。课程内容涵盖微服务整体架构、技术工具框架及容器平台等关键技术&#…

Linux文件IO(九)-原子操作与竞争冒险

Linux 是一个多任务、多进程操作系统&#xff0c;系统中往往运行着多个不同的进程、任务&#xff0c;多个不同的进程就有可能对同一个文件进行 IO 操作&#xff0c;此时该文件便是它们的共享资源&#xff0c;它们共同操作着同一份文件&#xff1b;操作系统级编程不同于大家以前…

javase复习day33网络编程

网络编程 常见的软件架构 BS架构 CS架构 网络编程小结 网络编程三要素 三要素小结 IP IPV4 IPV6 IP小结 IPV4的地址分类形式 常用的CMD命令 小结 InetAddress的使用 public class Demo1 {public static void main(String[] args) throws UnknownHostException {//获取IP对象/*…

【EI会议大盘点!涵盖计算机图像视觉、机器学习等众多方向】

EI会议&#xff0c;作为全球知名的学术会议平台&#xff0c;以其广泛的影响力和严格的收录标准著称。 相较于SCI、核心期刊等期刊来说&#xff0c;EI会议的审稿周期更短&#xff0c;最快7天即可录用。 费用上也相对较低&#xff0c;这对于资金和时间双重压力的学生党来说&…

Rpc框架——服务端框架设计

目录 一、Network 二、Protocol 三、Dispatcher 四、RpcRouter 五、Publish-Subscribe 六、Registry-Discovery 七、Server 服务端的功能需求&#xff1a; 基于网络通信接收客户端的请求&#xff0c;提供rpc服务 基于网络通信接收客户端的请求&#xff0c;提供服务注…

【POJ-1061 青蛙的约会】

题目 代码 #include <bits/stdc.h> using namespace std; typedef long long LL; LL ex_gcd(LL a, LL b, LL &x, LL &y) {if (b 0){x 1;y 0;return a;}LL gcd ex_gcd(b, a % b, x, y);LL tmp x;x y;y tmp - a / b * y;return gcd; } int main() {LL x, y…

springboot实战学习(9)(配置mybatis“驼峰命名“和“下划线命名“自动转换)(postman接口测试统一添加请求头)(获取用户详细信息接口)

接着学习。之前的博客的进度&#xff1a;完成用户模块的注册接口的开发以及注册时的参数合法性校验、也基本完成用户模块的登录接口的主逻辑的基础上、JWT令牌"的组成与使用以及完成了"登录认证"&#xff08;生成与验证JWT令牌&#xff09;具体往回看了解的链接…

SpringBoot项目编译运行成功,但有些包名类名仍然下划线标红的解决方法 | Idea

目录 问题解决方案&#xff1a;方法一&#xff1a;方法二【我用这个成功的】 问题 如图&#xff0c;成功运行但有些包名类名仍然下划线标红&#xff0c;强迫症抓狂 成功运行&#xff1a; 有些包导入标红&#xff1a; 解决方案&#xff1a; 方法一&#xff1a; 点击fil…

K8S介绍---搭建集群

Kubernetes介绍 官网&#xff1a;https://kubernetes.io/ 一、应用部署方式演变 1、传统部署&#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物理机上 优点&#xff1a;简单&#xff0c;不需要其他技术的参与 缺点&#xff1a;不能为应用程序定义资源使用边界&a…

AXI4-Stream

AXI4-Stream 简介信号握手机制字节类型TKEEP和TSTRBAXI4-Stream Data FIFO正常模式packet模式 AXI4-Stream Interconnect 简介 这是一种连续流接口&#xff0c;不需要地址线&#xff08;很像 FIFO &#xff0c;一直读或一直写就行&#xff09;。对于这类 IP &#xff0c;ARM 不…

WebUI密码被锁定

锁定密码 打开-webui/打开-webui 讨论 #1027 (github.com) 当你忘记WebUI密码了

通信工程学习:什么是VPN虚拟专用网络

VPN:虚拟专用网络 VPN(Virtual Private Network),即虚拟专用网络,是一种通过公共网络(如互联网)建立私有网络连接的技术。以下是关于VPN的详细解释: 一、VPN虚拟专用网络的定义与原理 VPN通过公共网络(通常是互联网)建立一个临时的、安全的连接,形…

一维数组在内存中的存储

在之前的文章中&#xff0c;我已经介绍了一维数组的创建和初始化和一维数组的使用&#xff0c;今天我们来深入了解一下一维数组在内存中的存储形式。 首先我们先用代码打出数组元素的地址。 #include <stdio.h> int main() { int arr[8]{1,2,3,4,5,11,6,7,8}; int i0; …

单词记忆的化境:用思想的流水去淹没坚硬的石块

其实&#xff0c;鹅卵石通常都是很硬的。但是河底的石子&#xff0c;几乎大多都成了鹅卵石&#xff0c;它们被流水淹没&#xff0c;日复一日、夜以继日的冲刷着&#xff0c;没有了棱角。 在单词的记忆过程中&#xff0c;我们有太多的人&#xff0c;都有着不堪回首的往事&#x…

HDFS分布式文件系统01-HDFS JAVA操作与联邦机制

HDFS分布式文件系统 参考学习目标第三课时知识点1-HDFS的Java API介绍知识点2-案例-使用Java API操作HDFS 第四课时知识点1-Federation机制的实现原理知识点2-Federation机制的特点知识点3-Federation机制的实现知识点4-Erasure Coding 参考 maven的setting.xml配置文件详解 …

影刀RPA实战:网页爬虫之天猫商品数据

1.实战目标 1.1 实战目标 在电商行业&#xff0c;我们经常爬取各个平台的商品数据&#xff0c;通过收集和分析这些商品数据&#xff0c;企业可以了解市场趋势、消费者偏好和竞争对手的动态&#xff0c;从而制定更有效的市场策略。爬取商品数据对于企业在市场竞争中把握先机、…

招联金融2025校招内推喇

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递&#xff09; 【招聘岗位】 深圳&#xff0c;武汉&#xff1a; 后台开发 前端开发 数据开发 数据运营…

SD卡读写

SD卡 SD卡分类根据存储容量根据性能 SD卡协议简介SPI 模式命令命令格式命令类别CMDACMD 响应R1R2R3R7 寄存器CSD 总线读操作写操作擦除&写保护 初始化流程 SD 模式 IP 设计IP 例化界面IP 接口IP 状态机IP 验证 雷龙贴片式TF卡参考资料 SD卡分类 根据存储容量 Standard Ca…