#vue3 实现前端下载excel文件模板功能

news/2024/4/21 0:07:54/

一、需求:

前端无需通过后端接口,即可实现模板下载功能。

通过构造一个 JSON 对象,使用前端常用的第三方库 xlsx,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板

二、效果:

三、源码如下:

npm install xlsx
<template><div class="download"><el-button type="warning" @click="downloadTemplate">下载模板</el-button></div>
</template><script setup>
import * as XLSX from 'xlsx';const writeFileAsync = (workbook, filename, options) => {return new Promise((resolve, reject) => {try {XLSX.writeFile(workbook, filename, options);resolve();} catch (error) {reject(error);}});
};const downloadTemplate = async () => {// 构造jsonconst json = [{序号: '',名称: '',日期: '',地址: '',年龄: '',类型: '',分数: ''}];// 将json数据转换成excel文件const worksheet = XLSX.utils.json_to_sheet(json);const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');try {// 将excel 文件保存为blobconst blob = await writeFileAsync(workbook, '模板.xlsx', { bookType: 'xlsx', mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });if (blob instanceof Blob) {// 创建下载链接const url = window.URL.createObjectURL(blob);// 创建隐藏的a标签,设置下载链接并触发点击const a = document.createElement('a');a.href = url;a.download = 'excel.template.xlsx';document.body.appendChild(a);a.click();// 释放对象urlwindow.URL.revokeObjectURL(url);// 等待5秒后关闭模态框setTimeout(() => {document.body.removeChild(a);}, 5000);} else {throw new Error('Invalid Blob');}} catch (error) {//console.error('Error creating object URL:', error);}
};</script><style lang="scss" scoped>
.download{padding: 20px;
}
</style>


http://www.ppmy.cn/news/1324736.html

相关文章

自学(网络安全)黑客——高效学习2024

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…

新数智空间:阿里云边缘云持续保持中国公有云市场第一

全球领先的 IT 市场研究和咨询公司 IDC 发布 《中国边缘云市场解读&#xff08;2023H1&#xff09;》报告 中国边缘公有云服务市场 阿里云持续第一 稳居市场第一&#xff0c;“边缘”逆势生长 近日&#xff0c;全球领先的 IT 市场研究和咨询公司 IDC 最新发布《中国边缘云市…

VirtualBox安装openSUSE-Leap-15.5虚拟机并配置网络

VirtualBox安装openSUSE-Leap-15.5虚拟机并配置网络 适用于在VirtualBox平台上安装openSUSE-Leap-15.5虚拟机。 1. 安装准备 1.1 安装平台 Windows 11 1.2. 软件信息 软件名称软件版本安装路径Oracle VM VirtualBoxVirtualBox-7.0.12-159484D:\softwareopenSUSE-Leapopen…

Java-初识正则表达式 以及 练习

目录 什么是正则表达式&#xff1f; 1. 正则表达式---字符类&#xff08;一个大括号匹配一个字符&#xff09;&#xff1a; 2. 正则表达式---预字符类&#xff08;也是匹配一个字符&#xff09;&#xff1a; 正则表达式---数量词 &#xff08;可以匹配多个字符&#xff09;…

代理IP安全使用指南:隐私保护与风险规避措施

代理IP安全使用指南&#xff1a;隐私保护与风险规避措施 一、选择可信的代理IP服务 - 付费代理优于免费代理&#xff1a;为了确保数据安全和隐私保护&#xff0c;优先考虑使用信誉良好、有偿的代理IP服务。这些服务通常会提供更好的匿名性&#xff0c;更少的数据记录&#xf…

解决springboot启动报Failed to start bean ‘subProtocolWebSocketHandler‘;

解决springboot启动报 Failed to start bean subProtocolWebSocketHandler; nested exception is java.lang.IllegalArgumentException: No handlers 问题发现问题解决 问题发现 使用springboot整合websocket&#xff0c;启动时报错&#xff0c;示例代码&#xff1a; EnableW…

Spring06

一、SpirngMvc的基本概念 Spring MVC 是 Spring 提供的一个基于 MVC 设计模式的轻量级 Web 开发框架&#xff0c;本质上相当于 Servlet。 MVC&#xff08;Model View Controller&#xff09;&#xff0c;一种用于设计创建Web应用程序的开发模式 Model&#xff08;模型&#xff…

字符串不可变性以及StringBuilder和StringBuffer在字符串拼接中的作用和扩容机制

java字符串的不可变性 在jdk1.8及以前&#xff0c;字符串底层存储用的是一个字符&#xff08;char&#xff09;类型的数组&#xff0c;jdk1.9之后用的是整型中的字节型&#xff08;byte&#xff09;数组来存储字符串。以下下主要以jdk1.8为例子展开。 private final char value…

css实现动态水波纹效果

效果如下&#xff1a; 外层容器 (shop_wrap)&#xff1a; 设置外边距 (padding) 提供一些间距和边距 圆形容器 (TheCircle)&#xff1a; 使用相对定位 (position: relative)&#xff0c;宽度和高度均为 180px&#xff0c;形成一个圆形按钮圆角半径 (border-radius) 设置为 50%&…

2024年甘肃省职业院校技能大赛信息安全管理与评估 样题三 理论题

竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 1.第一阶段&#xff1a;模块一 网络平台搭建与设备安全防护&#xff08;180 分钟&#xff0c;300 分&#xff09;。 2.第二阶段&#xff1a;模块二…

JavaWeb:Request Response

文章目录 1、Request和Response的概述2、Request继承体系3、Request获取请求数据3.1、获取请求行数据3.2、获取请求头3.3、获取请求体 4、Request通用方式请求参数5、POST请求参数乱码解决6、Request请求转发7、Response的响应状态码和响应头8、Response重定向9、Response响应字…

LeetCode讲解篇之78. 子集

文章目录 题目描述题解思路题解代码 题目描述 题解思路 初始化一个start变量记录当前从哪里开始遍历搜索nums 搜索过程的数字组合加入结果集 然后从start下标开始遍历nums&#xff0c;更新start&#xff0c;递归搜索 直到搜索完毕&#xff0c;返回结果集 题解代码 class …

YoloV5改进策略:BAM瓶颈注意力模块|BAM详解以及代码注释|CBAM姊妹篇|有效涨点

论文:《BAM:瓶颈注意力模块》 https://arxiv.org/pdf/1807.06514.pdf 近期深度神经网络的进展主要通过架构搜索来增强其表示能力。在这项工作中,我们专注于注意力在一般深度神经网络中的作用。我们提出了一种简单而有效的注意力模块,名为瓶颈注意力模块(BAM),可以与任何…

SPI传感器接口设计与优化:基于STM32的实践

SPI&#xff08;串行外设接口&#xff09;是一种常用的串行通信协议&#xff0c;用于在微控制器和外部设备之间进行全双工的高速数据传输。在本文中&#xff0c;我们将探讨如何基于STM32微控制器设计和优化SPI传感器接口&#xff0c;并提供相应的代码示例。 1. SPI传感器接口设…

Excel学习

文章目录 学习链接Excel1. Excel的两种形式2. 常见excel操作工具3.POI1. POI的概述2. POI的应用场景3. 使用1.使用POI创建excel2.创建单元格写入内容3.单元格样式处理4.插入图片5.读取excel并解析图解POI 4. 基于模板输出POI报表5. 自定义POI导出工具类ExcelAttributeExcelExpo…

9个Linux网络命令

这些命令用于监控连接、排除网络故障、路由选择、DNS 查询和接口配置。 1. ping – 向网络主机发送 ICMP ECHO_REQUEST ping 是用于测试网络连接的最流行的网络终端工具。ping 有很多选项&#xff0c;但在大多数情况下&#xff0c;您将使用它来请求域或IP地址&#xff1a; p…

Ubuntu磁盘分区并制作逻辑卷

磁盘分区并制作逻辑卷 将对磁盘 vdc 500G 的磁盘配置逻辑卷 查看分区前磁盘空间情况 过程 关键步骤&#xff1a; 创建物理卷 创建卷组 建立逻辑卷 创建文件系统 格式化逻辑卷 分区前查看 --检查/etc/fstab rootHKSZF-ZW-172-19-146-173:~# cat /etc/fstab | grep -v…

网络攻击与检测防御:维护数字安全的关键挑战

随着数字化时代的深入&#xff0c;网络攻击已成为企业和个人面临的严峻挑战之一。本文将深入探讨不同类型的网络攻击&#xff0c;以及有效的检测和防御策略&#xff0c;以确保网络系统的安全性和稳定性。 1. 常见网络攻击类型&#xff1a; DDoS 攻击&#xff1a;分布式拒绝服…

低代码配置-列表页组件设计

保存 表单属性存放 — bill筛选项配置存放 — filterLayout列表按钮存放 — buttonLayout列表布局存放 — listLayoutapi存放 — api 数据结构 layout:{// 存放表单基础配置bill:{},// 存放按钮基础配置buttonLayout:{// inSide 行内按钮 // outSide 全局按钮},// 存放表格列…

TortoiseGit 2.15.0.0 安装与配置(图文详细教程)

TortoiseGit的安装与配置 TortoiseGit是Tortoise为Git提供的版本可视化工具&#xff0c;简化了记忆Git命令行的过程&#xff0c;将命令行可视化。 确保自己电脑中已经下载好了git 官网下载TortoiseGit Download – TortoiseGit – Windows Shell Interface to Git 选择64-bi…