vue:write-excel-file页面文字转为xlsx文件

server/2024/12/22 14:30:37/

需求:导出弹框内容全部数据,通常这种前端拿到全部数据的情况下做出的导出,无需跟分页列表一样向接口发起请求

实现:点击跳转github了解write-excel-file 

下面说说vue3+ts项目中引入write-excel-file

1-安装引入

npm install write-excel-file --save

2-引入并使用

更多导出列表文件配置参考 write-excel-file

<!-- 北斗卡详情 -->
<script setup lang="ts">
//引入!
import writeXlsxFile from 'write-excel-file';// 是否正在导出
const isExporting = ref(false);
// 点击导出按钮
const onClickExport = useThrottleFn(async () => {isExporting.value = true;let schema = [{column: 'test1', type: String, value: v => v.platformName, width: 20},{column: 'test2', type: String, value: v => v.cardNo, width: 20},{column: 'test3', type: String, value: v => v.clientAccount, width: 20}];// 具体使用——导出文件 简单配置!await writeXlsxFile(cardList.value, {schema,headerStyle: {backgroundColor: '#FAFAFA',fontWeight: 'bold'},fileName: '导出.xlsx'});isExporting.value = false;
});
</script>


http://www.ppmy.cn/server/3793.html

相关文章

hackthebox - Redeemer

2024.4.19 TASK 1 Which TCP port is open on the machine? 6379 TASK 2 Which service is running on the port that is open on the machine? redis TASK 3 What type of database is Redis? Choose from the following options: (i) In-memory Database, (ii) Traditiona…

本地环境连接虚拟机中的数据库,虚拟机的防火墙允许从本地主机访问虚拟机的MySQL端口

要让本地环境可以访问虚拟机中的数据库&#xff0c;您可以按照以下步骤进行设置&#xff1a; 配置虚拟机网络&#xff1a; 确保虚拟机的网络设置为桥接模式&#xff0c;这样虚拟机可以获得与本地网络相同的IP地址段。 查看虚拟机IP地址&#xff1a; 在虚拟机中运行以下命令来查…

【数据结构】单链表经典算法题的巧妙解题思路

目录 题目 1.移除链表元素 2.反转链表 3.链表的中间节点 4.合并两个有序链表 5.环形链表的约瑟夫问题 解析 题目1&#xff1a;创建新链表 题目2&#xff1a;巧用三个指针 题目3&#xff1a;快慢指针 题目4&#xff1a;哨兵位节点 题目5&#xff1a;环形链表 介绍完了…

【云计算】混合云分类

《混合云》系列&#xff0c;共包含以下 3 篇文章&#xff1a; 【云计算】混合云概述【云计算】混合云分类【云计算】混合云组成、应用场景、风险挑战 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#xff0c;请给博主一个一键三连 &#x1f680;&#x1f680;&#x1f68…

短信登录session-redis

1.流程 1.1 发送验证码 模拟路径 http://127.0.0.1:8080/api/user/code?phone1335566 Request Method:POSTcontroller层 /*** 发送手机验证码*/PostMapping("code")public Result sendCode(RequestParam("phone") String phone, HttpSession session) {…

Spring Boot 多环境配置:YML 文件的三种高效方法

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

【C++】日期类的实现

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

github上传代码

偷一下懒&#xff0c;把链接贴一下&#xff0c;后续再补充。 1.下载Git 【学习笔记】上传代码到GitHub&#xff08;保姆级教程&#xff09; 2.如何创建GitHub仓库 手把手教你在github上传文件 3.如何删掉GitHub仓库 github如何删除仓库或项目&#xff1f; 4.遇到的错误 …