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

Это самый простой способ создать Excel из таблицы HTML.

Я использовал здесь библиотеку XLSX, которая представляет собой библиотеку JavaScript для создания файлов Excel и управления ими. Он является частью библиотеки SheetJS и спроектирован так, чтобы быть простым в использовании и гибким.

С библиотекой XLSX вы можете создавать новые файлы Excel, читать и изменять существующие, а также сохранять их в различных форматах. Он поддерживает широкий спектр функций, включая форматирование ячеек, проверку данных и сводные таблицы.

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.1/xlsx.full.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid black;
      padding: 0.5em;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td>35</td>
      <td>Male</td>
    </tr>
  </table>
  <br>
  <button onclick="generateExcel()">Generate Excel</button>
  <script>
    function generateExcel() {
      // get the table element
      var table = document.getElementById("myTable");
      
      // create a new Excel workbook object
      var wb = XLSX.utils.table_to_book(table);
      
      // save the workbook to an Excel file
      XLSX.writeFile(wb, "table.xlsx");
    }
  </script>
</body>
</html>

Первая строка HTML-страницы указывает, что это HTML-документ. Элемент <head> содержит информацию о странице, такую как заголовок, стили и скрипты.

В данном случае мы включаем библиотеку XLSX, связывая ее с CDN (сеть доставки контента) в элементе <script>. Это позволит нам использовать функции, предоставляемые библиотекой, в нашем коде JavaScript.

Элемент <style> содержит код CSS (каскадные таблицы стилей), определяющий стиль страницы. В этом случае мы указываем, что таблицы не должны иметь пробела между ячейками (border-collapse: collapse;) и что ячейки таблицы должны иметь сплошную черную рамку и отступы 0,5em.

Элемент <body> содержит содержимое HTML-страницы, отображаемой в веб-браузере. В этом случае у нас есть таблица HTML с идентификатором «myTable», которая содержит данные для четырех человек. У нас также есть элемент <button> с событием onclick, которое вызывает функцию generateExcel при нажатии кнопки.

Элемент <script> содержит код JavaScript, который запускается в веб-браузере. В этом случае мы определили функцию с именем generateExcel, которая делает следующее:

Он получает элемент таблицы HTML с идентификатором «myTable», используя функцию document.getElementById.
Он создает новый объект книги Excel

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

Похожие вопросы