vue3中将表格导出excel的方法(极简且有效)

🥰博主:小猫娃来啦

🥰文章核心:vue2或vue3中将表格导出excel的通用方法

文章目录

安装依赖,导入模块

安装

javascript 复制代码
npm i xlsx
或者
pnpm i xlsx

导入

javascript 复制代码
import * as XLSX from 'xlsx' 

这边有个说法:

在JavaScript中,使用import语句导入模块时,有两种不同的导入方式:默认导入命名导入

import XLSX from 'xlsx' 是默认导入,它假设模块中有一个默认导出的对象。但是,在 xlsx 模块中,并没有默认导出的对象的时候,就会报错。

import * as XLSX from 'xlsx' 是命名导入,它将整个模块作为一个命名空间引入,并将模块中的所有导出都作为该命名空间对象的属性。这种方式适用于 xlsx 模块,因为它将 XLSX 作为对象导出。

因此,你需要使用 import * as XLSX from 'xlsx' 来正确导入并使用 xlsx 模块。这样可以将整个模块作为命名空间引入,以便访问其中的方法和属性。


需要注意的

<script setup> 区块中,我们使用 ref 创建一个响应式引用变量 exportTableReflist,并初始化它们的值。

然后,我们需要定义了一个点击函数,暂且设置名字为exportBtn,用于处理导出按钮的点击事件。在该函数中,我们从 exportTableRef 中获取 el-table 的 DOM 元素,并执行与之前相同的导出操作。

在模板中,我们仍然可以引用 exportTableReflist,并将 exportBtn 绑定到导出按钮的点击事件上。

请注意,在 <script setup> 区块中,我们使用的是 ES 模块语法,需要确保你的环境支持该语法。


完整导出代码

html 复制代码
<script setup>
import { ref } from 'vue';
import XLSX from 'xlsx';

const exportTableRef = ref(null);
const list = ref([
  // 表格数据
]);

const exportBtn = () => {
  const tableDom = exportTableRef.value?.$el;
  if (!tableDom) {
    return;
  }
  
  const wb = XLSX.utils.table_to_book(tableDom);
  XLSX.writeFile(wb, '表格数据.xlsx');
};
</script>

<template>
  <div>
    <el-table
      ref="exportTableRef"
      :data="list"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <!-- 表格列定义 -->
    </el-table>
    <el-button style="margin-bottom: 10px" type="primary" @click="exportBtn">导出 Excel 表格</el-button>
  </div>
</template>

原理

  • 首先,代码获取了一个表格的 DOM 元素,即 tableDom,这是通过 exportTableRef.value?.$el 获取的。这个 DOM 元素必须是一个有效的 HTML 表格元素才能进行后续的导出操作。

  • 然后,使用 XLSX.utils.table_to_book() 方法将这个表格 DOM 元素转换为一个 workbook 对象 wbtable_to_book() 方法会将表格中的每个单元格的数据提取出来,并按照 Excel 的格式转换成一个 workbook 对象。

  • 最后,利用 XLSX.writeFile() 方法将 workbook 对象 wb 导出为一个名为 "表格数据.xlsx" 的 Excel 文件。这一步会将 workbook 对象转换为二进制的 Excel 文件,并触发文件下载到用户的设备上。

简而言之,就是用 xlsx 库中的 table_to_book() 方法,将 HTML 表格转换为 workbook 对象,并通过 XLSX.writeFile() 方法将 workbook 导出为 Excel 文件


效果


相关推荐
遂心_26 分钟前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ1 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
葡萄城技术团队1 小时前
从100秒到10秒的性能优化,你真的掌握 Excel 的使用技巧了吗?
excel
程序员鱼皮2 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort2 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手2 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码2 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码2 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高0072 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js