安装所需要的依赖
分别是 xlsx 和 file-saver
npm install --save xlsx file-saver
依赖引入
// main.js (全局Ï)
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
Vue.prototype.$FileSaver = FileSaver;
Vue.prototype.$XLSX = XLSX;
// 使用时引入
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
在 el-table 组件上添加 ID
这里模态框的作用是自定义导出的文件名称(根据自己需求加或者不加)
完整代码
<template>
<div class="index">
<el-button type="primary" @click="roleLeadingOut">导出el-button>
<el-table :data="tableData" style="width: 100%" border id="el-table" ref="tableRef">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="姓名" prop="name" />
<el-table-column label="性别" prop="age" width="180" />
<el-table-column label="电话" prop="phone" width="180" />
<el-table-column label="电子邮件" prop="email" width="180" />
<el-table-column label="介绍" prop="introduce" width="260" />
el-table>
<el-dialog v-model="dialog" title="表格导出" width="30%" @close="close">
<el-input v-model="name" placeholder="请输入导出文件的文件名">el-input>
<el-alert title="默认文件名为(导出测试)" type="info" :closable="false" style="margin-top: 10px;" />
<template #footer>
<span class="dialog-footer">
<el-button @click="dialog = false">取消el-button>
<el-button type="primary" @click="save">
确定
el-button>
span>
template>
el-dialog>
div>
template>
<script setup lang="ts">
import { reactive, toRefs, ref, onMounted, nextTick, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 依赖引入
import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
// 用来访问内部组件实例
const { proxy } = getCurrentInstance() as any;
const state = reactive({
tableData: [] as any, // 表格数据
dialog: false, // 模态框显示、隐藏
name: '' // 自定义文件名
})
const { tableData, dialog, name } = toRefs(state)
onMounted(() => {
// 获取数据
getDataList()
})
function getDataList() {
state.tableData = [
{
name: '张三',
age: '男',
phone: '16784938888',
email: '[email protected]',
introduce: '张三贼懒,介绍都没',
},
{
name: '李四',
age: '女',
phone: '16784936666',
email: '[email protected]',
introduce: '李四也很懒,介绍都没',
},
{
name: '王五',
age: '男',
phone: '16784935555',
email: '[email protected]',
introduce: '王五说举个例子',
},
]
}
// 表格导出excel
function roleLeadingOut() {
// getSelectionRows() 是el-table官方提供的方法(返回当前表格选中的行)
// 表格没有指定导出数据时是全部导出(否则是替换表格数据)
const selectList = proxy?.$refs.tableRef.getSelectionRows()
if (selectList.length) {
state.tableData = proxy?.$refs.tableRef.getSelectionRows()
}
state.dialog = true
}
function close() {
// 模态框取消,重新获取数据
getDataList()
}
function save() {
nextTick(function () {
let filename = ''
const xlsxParam = { raw: true } //转化成Excel使用原始格式
const elTable = XLSX.utils.table_to_book(document.getElementById('el-table'), xlsxParam)
if (state.name === '') {
// 默认导出文件名
filename = '导出测试.xlsx'
} else {
filename = state.name += '.xlsx'
}
const wbout = XLSX.write(elTable, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
})
}
script>
<style scoped lang="scss">
::v-deep(.el-dialog__body) {
padding: 20px;
}
style>
不支持表格中存在图片到处excel表格
表格带图片导出可以看 Element Plus 表格导出excel文件(带图片)