Это самый простой способ создать 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