ant design vue+vue3+ts+xlsx实现表格导出问excel文件(带自定义表头)~

news2024/9/21 0:44:16

1、首先默认你已安装ant design vue、xlsx 库、及file-saver。

2、导入:

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

注:这里的xlsx导入不能这么写,否则会报错,原因是版本不一致,语法向上兼容。

import XLSX from 'xlsx';

3、完整代码。

<a-button class="btn" type="primary" @click="exportData">导出</a-button>

<a-table :dataSource="dataList" :columns="columns" :scroll="{ x: '100%' }">
  <template #bodyCell="{ column }">
     <template v-if="column.key === 'canStop'">
        <a style="color: blue">停用</a>
     </template>
   </template>
</a-table>

import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

const dataList = ref([
    {
      id: 1, //计划id
      type: 1, //分配类型(1:指定人指定车; 2:指定人平均分车)
      status: 1, //状态
      staffCount: 1, //导入员工人数合计
      carCount: 1, //导入车量数合计
      countPerStaff: 1, //预计每位员工可分配
      firstAllocateTime: '2024-08-29 16:16:11', //首次分配时间
      modifiedPerson: '张三', //操作人
      modifiedTime: '2024-08-29 16:16:11', //操作时间
      canStop: true, //是否允许停止(true:允许; false: 不允许)
    },
  ]);

// 导出
  const exportData = () => {
    // 定义表头
    const header = [
      '序号',
      '分配形式',
      '状态',
      '导入员工人数合计',
      '导入车辆数合计',
      '预计每位员工可分配',
      '首次分配时间',
      '操作人',
      '操作时间',
      '操作',
    ];

    // 将表头和表格数据合并为一个二维数组
    const dataWithHeader = [header, ...dataList.value.map((row) => Object.values(row))];

    // 将表格数据转换为工作表对象
    const ws = XLSX.utils.json_to_sheet(dataWithHeader);

    // 创建一个新的工作簿并将工作表添加到其中
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // 将工作簿转换为二进制数据并保存为文件
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table-data.xlsx');
  };

 效果:

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

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

相关文章

【多线程】线程间通信 之虚假唤醒和中断

两个线程&#xff0c;可以操作初始值为0的一个变量&#xff0c;实现一个线程对该变量1&#xff0c;一个线程对该变量-1&#xff0c;实现交替&#xff0c;来10轮&#xff0c;变量初始值为0&#xff0c;以实现此问题作为引入&#xff0c;简化我们的理解 文章目录 一、两个线程syn…

EasyExcel实现复杂Excel的导入

最近项目中遇到一个复杂的Excel的导入&#xff0c;并且数据量较大。因为数据不规则&#xff0c;所以只能使用POI进行自定义读取&#xff0c;但是发现数据量大之后&#xff0c;读取数据非常耗时。后面换成EasyExcel&#xff0c;性能起飞。 1. Excel样板 如上图&#xff0c;需要…

leetcode 12. 整数转罗马数字

解题思路 1.首先&#xff0c;将值与对应字符用字典来表示&#xff0c;然后将符号对应的值按有序顺序存储至列表中sums 2.将要转换的整数转换成列表形式&#xff0c;遍历列表&#xff0c;每次遍历&#xff1a; 将值取出来算出对应所在位置的实际值 如 32 对应列表 [3,2] 则 3实…

【二叉搜索树】K型与KV型二叉搜索树简单实现

关于我&#xff1a; 睡觉待开机&#xff1a;个人主页 个人专栏: 《优选算法》《C语言》《CPP》 生活的理想&#xff0c;就是为了理想的生活! 作者留言 PDF版免费提供&#xff1a;倘若有需要&#xff0c;想拿我写的博客进行学习和交流&#xff0c;可以私信我将免费提供PDF版。…

中国电子学会Python3级等级考试202403客观题解析1

一、单项选择题 1、在 Python 中&#xff0c;hex(2023)的功能是&#xff1f;&#xff08; &#xff09; A 将十进制数 2023 转化为十六进制数 B 将十进制数 2023 转化为八进制数 C 将十六进制数 2023 转化为十进制数 D 将八进制数 2023 转化为十进制数 答案&#xff1a;A…

linux如何查看内存条是ddr几代

在 Linux 系统中&#xff0c;可以通过以下几种方法查看内存条的类型和代数&#xff08;如 DDR3、DDR4 等&#xff09;&#xff1a; 1. 使用 dmidecode 命令 dmidecode 是一个工具&#xff0c;它可以从系统的 DMI 表&#xff08;也称为 SMBIOS 表&#xff09;中提取硬件信息&a…

半导体制造业“电”亮未来,APView500护航电能质量新篇章

在科技日新月异的今天&#xff0c;半导体制造业作为信息技术的心脏&#xff0c;其生产效率与稳定性直接关乎国家科技实力与产业升级。然而&#xff0c;这一高精尖领域却长期面临电能质量问题的严峻挑战&#xff0c;尤其是谐波污染与电压暂降/中断两大难题&#xff0c;如同潜伏的…

springboot中上传图片到阿里云的oss云存储

上篇演示了如何将图片上传到本地&#xff0c;但是在实际项目中&#xff0c;这样是很占服务器存储空间的。所以&#xff0c;我们一般的解决方案是使用oss云存储。这里就结合阿里云的oss来实现下这个业务功能。 安装依赖 参考官网即可,https://help.aliyun.com/zh/oss/developer…

SOEX从去中心化的链上社交关系到创收策略

是时候摆脱传统的在线社区&#xff0c;真正进入 Web3 了&#xff0c;利用区块链的力量&#xff0c;并理解社交互动的意义远不止分享内容或复制交易。代币化将赋能参与提升到一个全新的水平&#xff0c;并带来一系列新的机会。 社交网络可以发挥强大的作用&#xff0c;尤其是从…

Carmaker Hil部署

本文主要简单介绍carmaker HIl的部署&#xff08;Windows环境&#xff09; carmaker HIL的上位机与Xpack 4的下位机通过一个以太网口进行连接&#xff0c;然后打开上位机的网络连接配置&#xff0c;并关闭防火墙&#xff1a; 打开carmaker HIL的配置&#xff0c;对网络连接进…

这一届“出道”的数字人,已经拿捧上了“铁饭碗”

文 | 智能相对论 作者 | 陈泊丞 好消息&#xff01;你心心念念的事业单位发录取公告了&#xff01; 坏消息&#xff01;他们没录你&#xff0c;录了个数字人。 图片来源网络 随着数字人技术的突破&#xff0c;越来越多的传统企业和机构开始用上了“数字员工”。 甚至很多中…

RFID光触发标签在文件柜管理中的创新应用

在当今信息化时代&#xff0c;文件管理对于企业和机构的重要性不言而喻。传统的文件柜管理方式存在诸多问题&#xff0c;如查找文件困难、管理效率低下、安全性难以保障等。而 RFID 光触发标签技术的出现&#xff0c;为文件柜管理带来了全新的解决方案。 一、传统文件柜管理的…

【C++ Primer Plus习题】9.1

问题: 解答: main.cpp #include <iostream> #include <string> #include "golf.h" using namespace std;#define SIZE 5int main() {golf ann;setgolf(ann, "AnnBirdfree", 24);golf andy;setgolf(andy);showgolf(ann);showgolf(andy);return…

如何组织一场考试答题?

&#x1f469;&#xff1a;我想组织一场考试答题&#xff0c;考完后可以导出所有考生的成绩&#xff0c;我还需要查出哪些人是没有参加考试的&#xff0c;这个能实现吗&#xff1f; &#x1f64b;&#xff1a;支持的 下面将以【如何组织一场考试答题】为主流程展开介绍 &#x…

第L2周:机器学习-线性回归

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标&#xff1a; 学习简单线性回归模型和多元线性回归模型通过代码实现&#xff1a;通过鸢尾花花瓣长度预测花瓣宽度 具体实现&#xff1a; &#xff08;一&…

走进酿酒车间:探寻白酒酿造的每一步

在古老的华夏大地上&#xff0c;有一种传统而不同的技艺——白酒酿造。它不仅承载了中华民族千年的文化积淀&#xff0c;更蕴含了无数酿酒师的匠心与智慧。今天&#xff0c;让我们一同走进豪迈白酒&#xff08;HOMANLISM&#xff09;的酿酒车间&#xff0c;探寻那神秘而又精彩的…

20240903 每日AI必读资讯

Claude 3.5 Sonnet对免费用户关闭&#xff1f; - 免费用户无法使用Claude 3.5 Sonnet模型&#xff0c;只能使用功能简单的Claude 3 Haiku模型。 - Claude 3.5 Sonnet在性能、理解能力、运行速度和视觉处理方面都有显著提升&#xff0c;成为行业新标杆。 - 关闭可能影响用户使…

解决jupyter notebook启动需要密码的问题

解决方法 在运行界面输入 jupyter notebook list 之后运行界面会输出token值&#xff0c;将对应地址后的token复制到密码栏中即可

Java题集(由入门到精通)01

此系列文章收录大量Java经典代码题&#xff08;也可以算是leetcode刷题指南&#xff09;&#xff0c;希望可以与大家一起努力学好Java。3、2、1&#xff0c;请看&#xff01; 目录 1.根据输入的运算符&#xff08;、-、*、/&#xff09;进行计算 2.随机生成一个整数&#xf…

AJAX基础与进阶

一、express基本使用 1. 在最外层启动终端&#xff0c;添加文件 2. 创建 express 框架 // 1. 引入express const express require(express);// 2. 创建应用对象 const app express();// 3. 创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 app.g…