Экспорт HTML-таблицы в Excel с помощью JavaScript

Экспорт HTML-таблицы в Excel с помощью JavaScript

Марк Игнатьев
Автор / Редактор
152

Как программно экспортировать таблицу HTML в формате Excel

Содержание показать

Введение

В современном веб-разработке часто возникает необходимость экспортировать данные, представленные в виде таблицы на веб-странице, в формат Excel. Это может быть полезно для пользователей, которые хотят сохранить или обработать данные в своих рабочих книгах Excel. В этой статье мы рассмотрим, как с помощью JavaScript можно реализовать экспорт HTML-таблицы в файл Excel.

Шаг 1: Разметка HTML

Прежде чем начать программировать экспорт таблицы, нам потребуется разметить нашу HTML-таблицу. Давайте создадим простую таблицу с несколькими столбцами и строками:

<table id="myTable">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
      <th>Город</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Александр</td>
      <td>28</td>
      <td>Москва</td>
    </tr>
    <tr>
      <td>Екатерина</td>
      <td>32</td>
      <td>Санкт-Петербург</td>
    </tr>
    <tr>
      <td>Иван</td>
      <td>25</td>
      <td>Новосибирск</td>
    </tr>
  </tbody>
</table>

Шаг 2: JavaScript для экспорта

Теперь давайте напишем JavaScript-код, который позволит пользователю экспортировать таблицу в Excel. Для этого мы будем использовать библиотеку “xlsx” и функциональность JavaScript для создания и загрузки файла Excel.

function exportToExcel() {
  const table = document.getElementById('myTable');
  const rows = table.getElementsByTagName('tr');
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.table_to_sheet(table);

  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const data = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

  // Создаем ссылку для загрузки файла Excel
  const url = window.URL.createObjectURL(data);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'table.xlsx';
  link.click();

  // Освобождаем ресурсы
  setTimeout(function () {
    window.URL.revokeObjectURL(url);
  }, 100);
}

Шаг 3: Добавление кнопки экспорта

Теперь, когда у нас есть код для экспорта, добавим кнопку, которая будет вызывать функцию exportToExcel() при нажатии:

<button onclick="exportToExcel()">Экспорт в Excel</button>

Заключение

В этой статье мы рассмотрели, как с помощью JavaScript можно экспортировать HTML-таблицу в формат Excel. Мы разметили таблицу HTML, написали JavaScript-код для экспорта и добавили кнопку, позволяющую пользователям запускать процесс экспорта. Теперь пользователи смогут с легкостью сохранять данные таблицы в файлы Excel и использовать их для дальнейшего анализа или обработки.

Читайте так же  Конкатенация строки и переменной в JavaScript: Шаг за шагом

Экспортируйте свои HTML-таблицы в формат Excel и сделайте свою работу более эффективной!

Ссылки:
– Библиотека “xlsx”: https://github.com/SheetJS/sheetjs