vue纯前端导出excel

最新推荐文章于 2024-08-06 16:10:14 发布

一只特立独行的小猪崽

最新推荐文章于 2024-08-06 16:10:14 发布

阅读量571

点赞数 1

分类专栏： vue element-ui js 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/Simplify_Webpage/article/details/111641988

版权

本文介绍了如何在Vue项目中实现纯前端的Excel导出功能。首先展示了导出效果，接着详细说明了安装相关依赖、封装公共导出函数以及在Vue组件中调用该函数的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue+element-ui项目中，实现纯前端导出excel功能

效果展示

页面展示
页面点击导出按钮，实现vue纯前端导出excel
导出excel展示

1.安装依赖

npm install file-saver
npm install xlsx

2.封装成公共函数

可以根据自己的需要，选择是否封装成公共函数。
我是放在utils下的config.js文件里面。


//导出
// 引入刚才安装的依赖
import FileSaver from 'file-saver'
import XLSX from 'xlsx';
// 定义暴露出去的函数名称 exportExcel
// id 是 table外层，你自己写的那个div的id名称。！！！！！！！！！
// name 是生成文件的名称，name