Экспорт данных

Element Plus предоставляет мощные компоненты и утилиты для работы с таблицами, формами и списками, что позволяет организовать экспорт данных в различные форматы, включая CSV, Excel и PDF. Основная цель — упрощение интеграции функционала экспорта прямо в интерфейс без необходимости использования сторонних библиотек, хотя их подключение остаётся возможным для расширенных сценариев.

Настройка таблицы для экспорта

Для экспорта данных обычно используется компонент <el-table>. Он поддерживает передачу массивов объектов через свойство data и обеспечивает гибкость для формирования колонок через el-table-column. Важным аспектом является подготовка данных: значения должны быть сериализуемыми и совместимыми с форматом экспорта.

Пример базовой таблицы:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Имя" width="180"/>
    <el-table-column prop="age" label="Возраст" width="100"/>
    <el-table-column prop="email" label="Email"/>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Иван', age: 28, email: 'ivan@mail.com' },
        { name: 'Мария', age: 32, email: 'maria@mail.com' }
      ]
    };
  }
};
</script>

Экспорт в CSV

CSV — один из самых популярных форматов для передачи таблиц. Для генерации CSV из данных el-table можно использовать простую функцию преобразования массива объектов в строку с разделителями:

function exportToCSV(data, filename = 'export.csv') {
  const header = Object.keys(data[0]).join(',');
  const rows = data.map(item => Object.values(item).join(',')).join('\n');
  const csvContent = `${header}\n${rows}`;
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.setAttribute('download', filename);
  link.click();
}

Вызывается функция при клике на кнопку:

<el-button type="primary" @click="exportToCSV(tableData)">Экспорт CSV</el-button>

Экспорт в Excel

Для работы с Excel-форматом чаще используется библиотека xlsx. Она легко интегрируется с Element Plus, позволяя формировать сложные таблицы с форматированием и стилями:

import * as XLSX from 'xlsx';

function exportToExcel(data, filename = 'export.xlsx') {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Лист1');
  XLSX.writeFile(workbook, filename);
}

Подключение кнопки аналогично CSV:

<el-button type="success" @click="exportToExcel(tableData)">Экспорт Excel</el-button>

Экспорт в PDF

Экспорт в PDF обычно требует подключения сторонней библиотеки, например jsPDF. Данные из el-table можно конвертировать в PDF с использованием табличных методов библиотеки:

import jsPDF from 'jspdf';
import 'jspdf-autotable';

function exportToPDF(data, filename = 'export.pdf') {
  const doc = new jsPDF();
  const columns = Object.keys(data[0]).map(key => ({ header: key, dataKey: key }));
  doc.autoTable({ columns, body: data });
  doc.save(filename);
}

Настройка пользовательских колонок

Element Plus позволяет гибко настраивать экспорт, формируя только нужные колонки и применяя кастомные функции преобразования значений:

const exportData = tableData.map(item => ({
  Имя: item.name,
  Возраст: item.age,
  Email: item.email.toLowerCase()
}));

Такой подход особенно полезен при необходимости скрыть служебные поля или изменить формат данных перед экспортом.

Автоматизация экспорта

Можно объединить логику экспорта в универсальную функцию с выбором формата через параметр:

function exportData(data, format) {
  switch(format) {
    case 'csv':
      exportToCSV(data);
      break;
    case 'excel':
      exportToExcel(data);
      break;
    case 'pdf':
      exportToPDF(data);
      break;
  }
}

И интегрировать с меню выбора:

<el-dropdown @command="exportData(tableData, $event)">
  <el-button>
    Экспорт
    <i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="csv">CSV</el-dropdown-item>
    <el-dropdown-item command="excel">Excel</el-dropdown-item>
    <el-dropdown-item command="pdf">PDF</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

Оптимизация больших данных

При работе с большими массивами данных рекомендуется:

  • Использовать пагинацию el-pagination для отображения части данных на странице.
  • Генерировать файл экспорта на стороне сервера, если массив превышает десятки тысяч записей.
  • Применять потоковую запись в формате CSV/Excel для снижения потребления памяти.

Вывод

Экспорт данных в Element Plus становится мощным инструментом при интеграции с CSV, Excel и PDF, сочетая удобство компонентов el-table, гибкость настройки колонок и простую интеграцию с внешними библиотеками. Такой подход позволяет строить полноценные приложения с функционалом отчетности и передачи данных.

Оглавление