table 表格转成 excell 导出

OK,功能非常简单,但是很实用啊!

依赖安装

这里我们需要安装两个依赖: xlsxfile-saver,就可以帮助我们实现功能了!

js 复制代码
 npm i xlsx file-saver

代码参考

导出方法
utils/index.js

js 复制代码
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'

export const exportExcel = (el, name) => {
  // 根据 table 生成一个工作表
  const worksheet = XLSX.utils.table_to_sheet(el)
  // 创建一个空工作簿
  const workbook = XLSX.utils.book_new()
  // 将工作表附加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1', true)
  // 写入工作簿并返回文件   bookType(导出文件的文件格式)  type (返回值类型)
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
  FileSaver.saveAs(data, name + '.xlsx')
}

注意:

以下是低版本导入方法,最新版本获取 XLSXundefined,建议统一按上述导入。

js 复制代码
import XLSX from 'xlsx'

index.vue

js 复制代码
<template>
	<div class="table">
		<el-table ref="elTab"></el-table>
	</div>
</template>

<script>
import { exportExcel } from "@utils/index.js"
export default {
	methods: {
		export() {
			exportExcel(this.refs.elTab.$el, "xxx");
		},
	}
}
</script>

效果展示

el-table 表格

excell 表格

题外话

在这里做一个提醒!!!

如果你用了 Element 的 table 组件,并且做了某一列固定,那么这时候导出会出现一个数据重复bug:导出的 excell 中包含重复的表格数据

正常表格是行排列组成的表格,而使用了 fixed 属性的表格,里面多了列排列组成的表格,就相当于一个 table 中包含了两组表格数据,所以导出就会出现两组相同的数据。

解决:

js 复制代码
export() {
	// 手动获取其中一组表格数据		el-table__fixed 是列组合数据
	let el = document.querySelector(".el-table__fixed")
	exportExcel(el, "xxx");
},
相关推荐
超浪的晨6 分钟前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
weixin_4435669826 分钟前
天学网面试 —— 中级前端开发岗位
vue
CCF_NOI.2 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck5 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9496 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_6 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路8 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔9 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang9 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript