vue3里将table表格中的数据导出为excel

想要实现前端对表格中的数据进行导出,这里推荐使用xlsx这个依赖库实现。

1、安装

复制代码
pnpm install xlsx

2、使用

javascript 复制代码
import * as XLSX from "xlsx";

直接在组件里导入XLSX库,然后给表格table通过ref创建响应式数据拿到table实例,将实例传给XLSX.utils.table_to_book()方法,再使用XLSX.writeFile()就可以下载excel文件了。具体方法请看demo源代码。

3、demo源代码

javascript 复制代码
<template>
  <div class="page6">
    <div style="display:flex;justify-content: flex-end">
      <el-button type="primary" @click="exportExcel">导出</el-button>
    </div>
    <el-table ref="tableRef" :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script setup>
import * as XLSX from 'xlsx'
const tableRef = ref(null)
const exportExcel = () =>{
  const tableDom = tableRef.value?.$el;
  if (tableDom) {
    const wb = XLSX.utils.table_to_book(tableDom);
    XLSX.writeFile(wb, '表格数据.xlsx');
  }

}
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="less" scoped>
.page6{
  width: 100%;
  height: 100%;
  padding: 20px;
}

</style>

4、效果

下载的excel文件

相关推荐
回忆哆啦没有A梦3 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__4 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生4 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园4 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8285 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
小菜全6 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
emma羊羊6 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan8 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿8 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊9 小时前
Polar WEB(1-20)
前端