Element Plus 表格导出excel文件（带图片）

依赖安装

我们需要用到 js-table2excel

npm install js-table2excel

引入依赖

import table2Excel from 'js-table2exce'

功能

自选数据导出
excel表格图片导出

代码实现

完整代码

<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="avatar" width="80" align="center">
                <template slot-scope="scope" #default="scope">
                    <el-image style="width: 60px; height: 60px" :src="scope.row.avatar"
                        :preview-src-list="[scope.row.avatar]">
                    </el-image>
                </template>
            </el-table-column>
            <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, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 引入依赖
import table2Excel from "js-table2excel"

// 用来访问内部组件实例
const { proxy } = getCurrentInstance() as any;
onMounted(() => {
    getDataList()
})

const state = reactive({
    tableData: [] as any, // 表格数据
    dialog: false, // 模态框显示、隐藏
    name: '', // 自定义文件名
    column: [{ // excel表格配置
        title: '姓名',
        key: 'name',
        type: 'text'
    },
    {
        title: '性别',
        key: 'age',
        type: 'text'
    },
    {
        title: '电话',
        key: 'phone',
        type: 'text'
    },
    {
        title: '电子邮件',
        key: 'email',
        type: 'text'
    },
    {
        title: '介绍',
        key: 'introduce',
        type: 'text'
    },
    {
        title: '头像',
        key: 'avatar',
        type: 'image',
        width: 50,
        height: 50
    },]
})

const { tableData, dialog, name } = toRefs(state)

function getDataList() {
    state.tableData = [
        {
            name: '张三',
            age: '男',
            phone: '16784938888',
            email: '1678498888@qq.com',
            introduce: '张三贼懒，介绍都没',
            avatar: 'https://img1.baidu.com/it/u=4221524001,3990923497&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        },
        {
            name: '李四',
            age: '女',
            phone: '16784936666',
            email: '1678496666@qq.com',
            introduce: '李四也很懒，介绍都没',
            avatar: 'https://img1.baidu.com/it/u=4221524001,3990923497&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        },
        {
            name: '王五',
            age: '男',
            phone: '16784935555',
            email: '1678495555@qq.com',
            introduce: '王五说举个例子🌰',
            avatar: 'https://img1.baidu.com/it/u=4221524001,3990923497&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        },
    ]
}

// 打开模态框
function roleLeadingOut() {
    state.dialog = true
}

function close() {
    // 模态框取消，重新获取数据
    getDataList()
}

function save() {
    let selectList = [] as any
    let filename = ''
    // getSelectionRows() 是el-table官方提供的方法（返回当前表格选中的行）
    // 表格没有指定导出数据时是全部导出（否则是替换表格数据）
    selectList = proxy?.$refs.tableRef.getSelectionRows()
    if (selectList.length) {
        state.tableData = proxy?.$refs.tableRef.getSelectionRows()
    }
    let tableDatas = JSON.parse(JSON.stringify(state.tableData))
    let datas = tableDatas;
    console.log(datas)
    if (state.name === '') {
        // 默认导出文件名
        filename = '导出测试'
    } else {
        filename = state.name
    }
    table2Excel(state.column, datas, filename)
    state.dialog = false
}
</script>

<style scoped lang="scss"></style>

结尾

这样就可以实现表格图片的导出咯
有用的帮忙点点关注、点点赞咯～