首页 > 其他分享 >54.使用VUE3+VITE+TYPESCRIPT+element-plus的setup语法糖,实现导出excel功能

54.使用VUE3+VITE+TYPESCRIPT+element-plus的setup语法糖,实现导出excel功能

时间:2023-07-19 09:56:03浏览次数:50  
标签:Excel TYPESCRIPT const 54 setup 导出 table workbook import

要实现导出Excel功能,你可以使用以下步骤:

1. 安装相关依赖:
```bash
npm install xlsx file-saver
```

2. 在你的组件中引入相关依赖:
```javascript
import { ref } from 'vue';
import { saveAs } from 'file-saver';
import { useTable } from 'element-plus';
import XLSX from 'xlsx';
```

3. 在setup函数中定义相关变量和方法:
```javascript
setup() {
  const tableRef = ref(null); // 表格的ref

  // 导出Excel方法
  const exportExcel = () => {
    const table = tableRef.value;
    if (!table) return;

    const workbook = XLSX.utils.table_to_book(table); // 将表格转换为workbook
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 将workbook转换为二进制数据

    const excelData = new Blob([excelBuffer], { type: 'application/octet-stream' }); // 创建Blob对象
    saveAs(excelData, 'data.xlsx'); // 下载Excel文件
  };

  return {
    tableRef,
    exportExcel
  };
}
```

4. 在模板中使用相关元素和事件:
```html
<template>
  <el-button @click="exportExcel">导出Excel</el-button>
  <el-table ref="tableRef" :data="tableData">
    <!-- 表格内容 -->
  </el-table>
</template>
```

这样就可以通过点击按钮来导出Excel文件了。请注意,上述代码中的`tableData`是你的表格数据,需要根据实际情况进行修改。另外,如果你的表格使用了分页,需要在导出Excel时将所有分页数据合并为一个表格再进行导出。

标签:Excel,TYPESCRIPT,const,54,setup,导出,table,workbook,import
From: https://www.cnblogs.com/mxx520/p/17564755.html

相关文章

  • P5494 题解
    来一发\(O(\logn)\)线性空间的解法。考虑通过只维护线段树叶子节点的虚树的方法压缩空间,考虑记录下每个节点的编号,然后通过异或完求最低位的\(1\)的方式求出LCA的深度,然后记录下LCA右端点的编号。在回收节点的时候可以释放储存右端点编号的空间,但是这里为了方便就不这样......
  • [Typescript] 150 Hard - OptionalUndefined
    Implementtheutiltype OptionalUndefined<T,Props> thatturnsallthepropertiesof T thatcanbe undefined,intooptionalproperties.Inaddition,asecond-optional-generic Props canbepassedtorestrictthepropertiesthatcanbealtered.Opti......
  • [Typescript] 149 Medium - Triangular number
    GivenanumberN,findtheNthtriangularnumber,i.e. 1+2+3+...+N/*_____________YourCodeHere_____________*/exporttypeNumberToArray<Textendsnumber,Rextends1[]=[]>=R["length"]extendsT?R:NumberToArray&......
  • [Typescript Challenge] 148 Medium - CartesianProduct
    Given2sets(unions),returnitsCartesianproductinasetoftuples,e.g.CartesianProduct<1|2,'a'|'b'>//[1,'a']|[2,'a']|[1,'b']|[2,'b'] Solution:/*____________......
  • Inno SetUp安装包:如何在程序安装时卸载驱动程序
    pnputil命令行方式卸载如果您想通过命令行卸载.INF文件的驱动程序,您需要使用PnPUtil命令。以下是一个示例:pnputil/delete-driveroem0.inf/uninstall在这个示例中,oem0.inf应该被替换为您要卸载的驱动程序的.inf文件。使用pnputil/enum-drivers命令可以列出已安装驱动程序的......
  • P5427 [USACO19OPEN] Left Out S
    P5427[USACO19OPEN]LeftOutS-洛谷|计算机科学教育新生态(luogu.com.cn) 你有个01矩阵,每次可翻转一行或一列,问能否使得最后只有一个0或1。其中翻转指1变0,0变1。 做法基本上都是取第一行第一列给他全部翻成0。这个是一定可以办到的。你只需要找1的位置翻掉那一行/列......
  • ARC154
    [ARC154A]SwapDigit和一定差小积大,竟可能的使两个数差大即可。复杂度\(O(n)\)。#include<bits/stdc++.h>usingnamespacestd;typedeflonglongll;constintmod=998244353;intn;strings,t;intmain(){ ios::sync_with_stdio(false);cin.tie(0);cout.tie(......
  • 题解 P5426 [USACO19OPEN]Balancing Inversions G
    来一篇简单易懂的良心题解。由于数值不是\(0\)就是\(1\),我们可以考虑将逆序对的统计方式化简。以左区间为例,设\(x\)为\(1\)的个数,\(p_i\)为第\(i\)个\(1\)的坐标,则逆序对个数为\(\sum\limits_{i=1}^{x}n-p_i-(x-i)\)。也就是\((n-x)\cdotx+\frac{x\cdot(x+1)}{......
  • 记录--盘点 TypeScript 那些奇怪的符号
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。一、!非空断言操作符在上下文中当类型检查器无法断定类型时,一......
  • CVE-2023-1454注入分析复现
    简介JeecgBoot的代码生成器是一种可以帮助开发者快速构建企业级应用的工具,它可以通过一键生成前后端代码,无需写任何代码,让开发者更多关注业务逻辑。影响版本Jeecg-Boot<=3.5.1环境搭建idea+后端源码:https://github.com/jeecgboot/jeecg-boot/archive/refs/tags/v3.5.0.zip......