Vue+ElementUI实现选择指定行导出Excel

在Vue项目中使用ElementUI实现指定行导出为Excel，可以通过element-ui的el-table组件结合exceljs和file-saver库来实现。以下是一个简化的实现方案：

1. 安装所需依赖：

npm install exceljs file-saver

2. 实现导出功能的Vue组件方法：

<template>
  <el-button @click="exportRowsToExcel">导出指定行</el-button>
  <el-table
    ref="multipleTable"
    :data="tableData"
    ...
  >
    <!-- 你的表格内容 -->
  </el-table>
</template>
 
<script>
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
 
export default {
  data() {
    return {
      tableData: [
        // 你的表格数据
      ],
      selectedRows: [] // 存储选中的行数据
    };
  },
  methods: {
    exportRowsToExcel() {
      // 获取选中的行数据
      this.selectedRows = this.$refs.multipleTable.selection;
      if (this.selectedRows.length === 0) {
        this.$message.error('请至少选择一行数据导出');
        return;
      }
 
      // 创建工作簿和工作表
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('导出数据');
 
      // 添加表头
      worksheet.addRow(this.getTableHeader());
 
      // 添加选中的行数据
      this.selectedRows.forEach(row => {
        worksheet.addRow(this.getRowData(row));
      });
 
      // 定义表格风格
      worksheet.eachRow({ includeEmpty: true }, function(row, rowNumber) {
        // 设置行高度
        row.height = 20;
        // 设置字体样式
        row.getCell(1).font = { name: 'Arial', family: 4, size: 12 };
      });
 
      // 定义列宽
      worksheet.columns.forEach(function(column, index) {
        column.width = index < 2 ? 20 : 30; // 假设前两列宽20，其他30
      });
 
      // 生成Excel文件
      workbook.xlsx.writeBuffer().then(data => {
        // 使用Blob和createObjectURL创建下载链接
        const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
        const url = window.URL.createObjectURL(blob);
        // 创建a标签并模拟点击下载
        const a = document.createElement('a');
        a.href = url;
        a.download = '导出数据.xlsx';
        a.click();
        window.URL.revokeObjectURL(url);
      }).catch(error => {
        this.$message.error('导出失败：' + error);
      });
    },
    getTableHeader() {
      // 返回表头数据
      return ['列1', '列2', '列3']; // 根据实际情况定义表头
    },
    getRowData(row) {
      // 返回行数据
      return [row.field1, row.field2, row.field3]; // 根据实际数据字段定义
    }
  }
};
</script>

在这个例子中，我们使用了ElementUI的el-table组件来展示表格数据，并通过ref属性获取选中的行。然后我们创建