vue纯前端导出excel

最新推荐文章于 2024-12-10 23:12:29 发布

原创

最新推荐文章于 2024-12-10 23:12:29 发布 · 610 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

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

在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 可以不传。
export