Vue3:将表格数据下载为excel文件

需求

将表格数据或者其他形式的数据下载为excel文件

技术栈

Vue3、ElementPlus、

实现

1、安装相关的库
  • 下载xlsx 和 file-saver 库
javascript 复制代码
npm install -S file-saver
npm install -S xlsx
  • 引入XLSX库和FileSaver库
javascript 复制代码
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
2、添加导出按钮
  • 需要一个"导出"按钮,并给它绑定一个点击事件
    (1)点击该按钮可以将表格的数据下载为excel文件;
    (2)关于按钮的图标可以引用elementplus里的下载图标
  • 另外,可以添加触发提示,告知用户可以进行数据下载
    关于触发提示可以引用elementplus里面的el-tooltip组件
  • 大致效果如下:
  • 导出按钮、触发提示、表格的包含关系如下:
  • 相关代码:
javascript 复制代码
<!-- 表格 -->
<div class="TopCourse">
  <div class="navTop">
	<!-- 触发提示 -->
	<el-tooltip
	  class="box-item"
	  effect="dark"
	  content="下载全部数据"
	  placement="top-start"
	>
	  <!-- 下载按钮 -->
	  <el-button type="primary" :icon="Download" @click="userExport" />
	</el-tooltip>
  </div>

  <!-- 表格 -->
  <el-table
	id="myTable"
	:data="tableData"
	style="width: 95%"
	:header-cell-style="{ 'text-align': 'center' }"
	:cell-style="{ 'text-align': 'center' }"
  >
	<el-table-column prop="index" label="No." />
	<el-table-column prop="ID" label="ID" />
	
  </el-table>
</div>
	
3、函数:将数据下载为excel文件
  • 使用 SheetJS 库将表格数据转换为 Excel 文件格式;
  • 使用 file-saver 库将生成的 Excel 文件保存到本地
javascript 复制代码
// tableDataAllL:指excel数据的全部汇总(根据实际情况自己去补充)
var tableDataAll = [];
// 将数据下载为excel文件
function userExport() {
  const worksheet = XLSX.utils.json_to_sheet(tableDataAll);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  const excelBuffer = XLSX.write(workbook, {
	bookType: "xlsx",
	type: "array",
  });
  const blob = new Blob([excelBuffer], {
	type: "application/vnd.ms-excel",
  });
  FileSaver.saveAs(blob, "tableDataAll"); // 下载文件 文件名
}
  • 以上函数可以直接引用,修改对应的部分即可
相关推荐
杨进军15 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW30 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字37 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript