vue3 excel 导出功能

1.安装 xlsx 库

npm install xlsx

2.创建导出函数

src/utils/excelUtils.js

import * as XLSX from 'xlsx';const exportToExcel = (fileName, datas, sheetNames) => {// 创建工作簿const wb = XLSX.utils.book_new()for (let i = 0; i < datas.length; i++) {let data = datas[i];let sheetName = sheetNames[i];// 创建工作表let ws = XLSX.utils.json_to_sheet(data)// 将工作表放入工作簿中XLSX.utils.book_append_sheet(wb, ws, sheetName)}// 生成文件并下载XLSX.writeFile(wb, fileName)
}export default exportToExcel;

3.在组件中调用导出函数

<template><div><el-button  @click="exportExcel">导出 Excel</el-button></div></template><script lang="ts">import  exportToExcel  from '@/utils/excelUtils';const exportExcel = () => {const data2 = [{ name: 'Alice', age: 25, occupation: 'Engineer' },{ name: 'Bob', age: 30, occupation: 'Designer' },{ name: 'Carol', age: 28, occupation: 'Developer' }];const data3 = [{ name2: 'Alice', age: 27, occupation: 'Engineer' },{ name2: 'Bob', age: 31, occupation: 'Designer' },{ name2: 'Carol', age: 29, occupation: 'Developer' }];exportToExcel('user_data.xlsx', [data2, data3], ['Sheet1', 'Sheet_data3']);
};export default {methods: {exportExcel}
};</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爬虫007_python中的输出以及格式化输出_以及输入---python工作笔记025

首先看输出 输出这里,注意不能直接上面这样,18需要转换成字符串 可以看到python中这个字符串和数字一起的时候,数字要转换一下成字符串. 然后这里要注意%s 和%d,这个s指的是字符串,d指的是数字 注意后面的内容前面要放个% ,然后多个参数的话,那么这里用(),里面用,号隔开 然…

SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--具体功能实现【三】

文章目录 SSM--功能实现实现功能04-添加家居信息需求分析/图解思路分析代码实现注意事项和细节 实现功能05-显示家居信息需求分析/图解思路分析 代码实现 SSM–功能实现 实现功能04-添加家居信息 需求分析/图解 思路分析 完成后台代码从dao -> serivce -> controller ,…

24届近5年江南大学自动化考研院校分析

今天给大家带来的是江南大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、江南大学 学校简介 江南大学&#xff08;Jiangnan University&#xff09;是国家“双一流”建设高校&#xff0c;“211工程”、“985工程优势学科创新平台”重点建设高校&#xff0c;入选…

pytest测试框架之fixture测试夹具详解

fixture的优势 ​ pytest框架的fixture测试夹具就相当于unittest框架的setup、teardown&#xff0c;但相对之下它的功能更加强大和灵活。 命名方式灵活&#xff0c;不限于unittest的setup、teardown可以实现数据共享&#xff0c;多个模块跨文件共享前置后置可以实现多个模块跨…

【Leetcode】无重复字符的最长字串||带输出测试(滑动窗口+HashMap)

step by step. 题目 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb" 输出…

新手教程:5步掌握系统流程图绘制方法!

流程图通常用于管理、分析、设计许多不同领域的流程&#xff0c;是一个很有用的工具&#xff0c;能够帮助大家更轻松、更有效地解决问题。系统流程图是流程图的常见变体之一。 系统流程图是展示数据流以及决策如何影响周围事件的图表类型。 与其他类型的流程图一样&#xff0c;…

基于DETR (DEtection TRansformer)开发构建MSTAR雷达影像目标检测系统

关于DETR相关的实践在之前的文章中很详细地介绍过&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《DETR (DEtection TRansformer)基于自建数据集开发构建目标检测模型超详细教程》 《书接上文——DETR评估可视化》 基于MSTAR雷达影像数据开发构建目标检测系统&am…

golang trace view 视图详解

大家好&#xff0c;我是蓝胖子&#xff0c;在golang中可以使用go pprof的工具对golang程序进行性能分析&#xff0c;其中通过go trace 命令生成的trace view视图对于我们分析系统延迟十分有帮助&#xff0c;鉴于当前对trace view视图的介绍还是很少&#xff0c;在粗略的看过tra…

有血有肉的PPT

1、PPT是Powerpoint缩写 2、引申的含义是Powerpoint Power(力量/能量&#xff09; Point(观点/要点) 3、用PPT做的文档是讲演稿&#xff0c;讲演的内容要有力度&#xff0c;之所以要去演讲是为了能够影响受众 4、其次演讲稿上的内容要列出要点、表明观点&#xff0c;所以一般P…

lwip不同的socket分别作为监听和客户端连接

在LWIP中&#xff0c;一个网络设备&#xff08;如以太网卡&#xff09;可以创建多个socket&#xff0c;用于处理不同的网络连接。一般&#xff0c;你可以创建一个socket用于监听&#xff08;listen&#xff09;连接&#xff0c;另一个socket用于主动发起&#xff08;connect&am…

TIA博途选型工具Selection Tool的基本使用方法介绍

TIA博途选型工具Selection Tool的基本使用方法介绍 如下图所示,下载选型工具后,解压缩,可以看到SelectionTool.exe执行程序, 感兴趣的可从以下链接获取该软件: TIA博途选型工具TIA Selection Tool-2023最新 无需安装,直接双击打开该软件, 如下图所示,进入软件后(默认…

Flutter 自定义view

带进度动画的圆环。没gif&#xff0c;效果大家自行脑补。 继承CustomPainter&#xff0c;paint()方法中拿到canvas&#xff0c;绘制API和android差不多。 import package:flutter/material.dart;class ProgressRingPainter extends CustomPainter {double strokeWidth 20;Col…