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.mfbz.cn/a/64731.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Q-Tester 3.8:适用于开发、生产和售后的诊断测试软件

Q-Tester是一款简易使用的诊断测试软件&#xff0c;同时也是一款基于ODX&#xff08;ASAM MCD-2D/ISO 22901-1&#xff09;国际标准的工程诊断仪&#xff0c;通过该诊断仪可实现与ECU控制之间的数据交互。这一方案的优势是&#xff0c;在功能方面确定并完成相关开发工作后&…

文章采集伪原创发布工具-147采集

在当今信息爆炸的时代&#xff0c;企业和个人都意识到了获取高质量、原创的内容的重要性。然而&#xff0c;手动撰写大量的原创内容是一项耗时费力的任务。为了解决这个问题&#xff0c;我向您介绍一款颠覆性的数据采集工具——147采集。 147采集是一款专业且高效的数据采集软件…

【干货】商城系统的重要功能特性介绍

电子商务的快速发展&#xff0c;商城系统成为了企业开展线上销售的重要工具。一款功能强大、用户友好的商城系统能够有效提升企业的销售业绩&#xff0c;提供良好的购物体验。下面就商城系统的重要功能特性作一些简单介绍&#xff0c;帮助企业选择合适的系统&#xff0c;打造成…

软件测试面试【富途面经分享】

目录 一面面经&#xff08;1h&#xff09; 二面面经 一面面经&#xff08;1h&#xff09; 一、对白盒黑盒灰盒测试的理解 答&#xff1a; 1、黑盒测试就当整个程序是个黑盒子&#xff0c;我们看不到它里面做了什么事情&#xff0c;只能通过输入输出看是否能得到我们所需的来…

Linux初识网络基础

目录 网络发展 认识“协议 ” 网络协议 OSI七层模型&#xff1a; TCP/IP五层&#xff08;或四层&#xff09;模型 网络传输基本流程 网络传输流程图&#xff1a; 数据包封装和封用 网络中的地址 认识IP地址&#xff1a; 认识MAC地址&#xff1a; 网络发展 1.独立…

【MySQL】增删查改基础

文章目录 一、创建操作1.1 单行插入1.2 多行插入1.3 插入否则替换更新1.4 替换replace 二、查询操作2.1 select查询2.2 where条件判断2.3 order by排序2.4 limit筛选分页结果 三、更新操作四、删除操作4.1 删除一列4.2 删除整张表数据 五、插入查询结果 CRUD : Create(创建), R…

vue去掉所有输入框两边空格,封装指令去空格,支持Vue2和Vue3,ElementUI Input去空格

需求背景 就是页面很多表单输入框&#xff0c;期望在提交的时候&#xff0c;都要把用户两边的空格去掉 ❌使用 vue 的指令 .trim 去掉空格 中间会输入不了空格&#xff0c; 比如我想输入 你好啊 中国, 这中间的空格输入不了&#xff0c;只能变成 你好啊中国 ❌在提交的时候使用…

leetcode每日一练-第278题-第一个错误的版本

一、思路 二分查找——因为它可以快速地将版本范围缩小一半&#xff0c;从而更快地找到第一个坏版本。 二、解题方法 维护一个左边界 left 和一个右边界 right&#xff0c;在每一步循环中&#xff0c;我们计算中间版本 mid&#xff0c;然后检查它是否是坏版本。如果是坏版本…

router和route的区别

简单理解为&#xff0c;route是用来获取路由信息的&#xff0c;router是用来操作路由的。 一、router router是VueRouter的实例&#xff0c;通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象&#xff0c;这个对象中是一个全局的对象&#xff0c;他包含了所…

三次握手与四次挥手 tcp协议特点 tcp状态转移图 TIME_WAIT 抓包

讲解 三次握手图示理解讲解 四次挥手图示理解理解 tcp协议特点tcp状态转移过程总图四次挥手状态转移过程三次挥手状态转移过程 TIME_WAIT状态存在的原因连接状态的一个测试一个面试题&#xff1a;抓包&#xff1a; 三次握手 图示理解 三次握手发生在客户端执行 connect()的时…

小研究 - Mysql快速全同步复制技术的设计和应用(一)

Mysql半同步复制技术在高性能的数据管理中被广泛采用&#xff0c;但它在可靠性方面却存在不足.本文对半同步复制技术进行优化&#xff0c;提出了一种快速全同步复制技术&#xff0c;通过对半同步数据复制过程中的事务流程设置、线程资源合理应用、批量日志应用等技术手段&#…

SciencePub学术 | Elsevier旗下计算机类重点SCIE征稿中

SciencePub学术 刊源推荐: Elsevier旗下计算机类重点SCIE征稿中&#xff01;信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 计算机语音类重点SCIE 【期刊简介】IF&#xff1a;4.0-4.5&#xff0c;JCR2区&#xff0c;中科院3区&#xff1b; 【出版社…

JVM之类加载与字节码(一)

1.类文件结构 一个简单的HelloWorld.Java package cn.itcast.jvm.t5; // HelloWorld 示例 public class HelloWorld { public static void main(String[] args) { System.out.println("hello world"); } }编译为 HelloWorld.class 后的样子如下所示&#xff1a; […

维深(Wellsenn):2023中国消费端VR内容开发商调研报告(附下载

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 国内互联网大厂商入局VR&#xff0c;字节跳动、网易表态明确。字节跳动2021年收购国内头部VR硬件厂商PICO后&#xff0c;加速构建VR内容生态&#xff0c;2021年 成立海南创见未来当前已推出VR视频应用…

设计模式——设计模式以及六大原则概述

设计模式代表有经验的面向对象软件开发人员使用的最佳实践。 设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。 这些解决方案是由许多软件开发人员在相当长的时间内通过试错获得的。 什么是 GOF&#xff08;四人帮&#xff0c;全拼 Gang of Four&#xff09…

SpringBoot项目上传至服务器

1.服务器安装JDK1.8 通过包管理器安装 2.服务器安装数据库 参考链接&#xff1a; CentOS 7 通过 yum 安装 MariaDB - 知乎 1. 安装之后没有密码&#xff0c;所以需要设置密码&#xff0c;使用下面的语句 set password for rootlocalhost password(111111); 2.在数据库中建…

软件单元测试

单元测试目的和意义 对于非正式的软件&#xff08;其特点是功能比较少&#xff0c;后续也不有新特性加入&#xff0c;不用负责维护&#xff09;&#xff0c;我们可以使用debug单步执行&#xff0c;内存修改&#xff0c;检查对应的观测点是否符合要求来进行单元测试&#xff0c…

机器学习笔记 - 使用 Tensorflow 从头开始​​构建您自己的对象检测器

一、简述 之前的文章是利用了VGG16的预训练模型,然后构造完全连接的层标头以输出预测的边界框坐标,但是不包含对象标签的分类。 机器学习笔记 - 使用Keras、TensorFlow框架进行自定义数据集目标检测训练_keras 制作 目标检测 数据集_坐望云起的博客-CSDN博客学习如何训练自定…

无涯教程-Lua - repeat...until 语句函数

与 for 和 while 循环(它们在循环顶部测试循环条件)不同&#xff0c;Lua编程中的 repeat ... until 循环语言在循环的底部检查其条件。 repeat ... until 循环与while循环相似&#xff0c;不同之处在于&#xff0c;保证do ... while循环至少执行一次。 repeat...until loop - …

K8S系列文章之 kubeasz部署K8S环境

自动化安装方式&#xff08;kubeasz&#xff09;* 生产环境推荐&#xff08;首次安装下载相关配置和安装包&#xff09;是基于Ansible实现的部署工具 简单介绍 每一具体k8s集群的详细配置参数文件 Ansible 任务配置文件 镜像安装包 安装部署步骤 前提 &#xff1a; 保证Ansib…
最新文章