vue3+element-plus - 最新详细实现将表格Table组件 “所见所得导出“ 为excel(xls/xlsx)电子表格文件，表格中的图片图像、图标等媒体资源完美导出显示（详细示例代码）

在Vue 3和Element Plus中实现“所见所得”的Excel导出功能，可以使用第三方库如xlsx来创建Excel文件，并结合Vue的方法来处理导出逻辑。以下是一个简化的实现示例：

1. 安装xlsx库：

npm install xlsx file-saver

2. 在Vue组件中使用xlsx库来导出表格数据为Excel文件：

<template>
  <el-button @click="exportTable">导出Excel</el-button>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%">
    <!-- 表格列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
 
const tableData = ref([
  // 表格数据
]);
 
const exportTable = () => {
  // 通过ref获取表格DOM元素
  const table = unref(table);
  // 使用Blob和createObjectURL创建下载链接
  const wb = XLSX.utils.table_to_book(table);
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    const blob = new Blob([wbout], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    // 创建a标签模拟点击进行下载
    const a = document.createElement('a');
    a.href = url;
    a.download = 'table.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } catch (e) {
    if (typeof console !== 'undefined') console.error(e, wbout);
  }
  return wbout;
};
</script>

在上述代码中，我们定义了一个exportTable方法，该方法通过table_to_book函数将表格转换为Excel工作簿对象，然后使用write函数将其转换为可下载的格式。最后，创建一个a标签模拟点击进行下载。这样用户就可以直接在前端浏览器中导出表格数据为Excel文件。