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

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

安装依赖,导入模块

安装

npm i xlsx
或者
pnpm i xlsx

导入

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 模块语法,需要确保你的环境支持该语法。


完整导出代码

<script setup>
import { ref } from 'vue';
import * as 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 文件


效果

当然这边的订单详情后端是要进行联表的,前端需要进行相应的打开操作。

相关文章
|
6天前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
|
9天前
|
JavaScript 前端开发 算法
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9天前
|
JavaScript 前端开发 API
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
19天前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
|
9天前
|
JavaScript 前端开发 API
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
文字识别 BI
【图片型PDF】批量识别扫描件PDF指定区域局部位置内容,将识别内容导出Excel表格或批量改名文件,基于阿里云OCR对图片型PDF识别改名案例实现
在医疗和政务等领域,图片型PDF文件(如病历、报告、公文扫描件)的处理需求广泛。通过OCR技术识别这些文件中的文字信息,提取关键内容并保存为表格,极大提高了信息管理和利用效率。本文介绍一款工具——咕嘎批量OCR系统,帮助用户快速处理图片型PDF文件,支持区域识别、内容提取、导出表格及批量改名等功能。下载工具后,按步骤选择处理模式、进行区域采样、批量处理文件,几分钟内即可高效完成数百个文件的处理。
158 8
|
4月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
156 64
|
4月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
202 64
|
4月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
201 60
|
4月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
163 58

热门文章

最新文章