Преобразование HTML-таблицы в профессиональный документ Excel
05.01.2023 11:39
Это самый простой способ создания 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 (Content Delivery Network) в элементе <script>. Это позволит нам использовать функции, предоставляемые библиотекой, в нашем коде JavaScript.
Элемент <style> содержит код CSS (Cascading Style Sheets), который определяет стиль страницы. В данном случае мы указываем, что в таблицах не должно быть пространства между ячейками (border-collapse: collapse;), а ячейки таблицы должны иметь сплошную черную границу и отступ 0,5em.
Элемент <body> содержит содержимое HTML-страницы, которое отображается в веб-браузере. В данном случае у нас есть HTML-таблица с идентификатором "myTable", которая содержит данные о четырех людях. У нас также есть элемент <button> с событием onclick, которое вызывает функцию generateExcel при нажатии на кнопку.
Элемент <script> содержит код JavaScript, который выполняется в веб-браузере. В данном случае мы определили функцию generateExcel, которая выполняет следующие действия:
- Получает элемент таблицы HTML с идентификатором "myTable" с помощью функции document.getElementById.
- Она создает новый объект рабочей книги Excel
Калькулятор CGPA 12 для семестра
20.03.2023 12:24
Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие действия:
Как собрать/развернуть часть вашего приложения Angular
20.03.2023 08:46
Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?
Запуск PHP на IIS без использования программы установки веб-платформы
19.03.2023 13:43
Установщик веб-платформы, предлагаемый компанией Microsoft, перестанет работать 31 декабря 2022 года. Его закрытие привело к тому, что мы не можем запускать наши php-файлы через localhost на наших компьютерах. Мне с трудом удалось установить его и я решил поделиться этой статьей, чтобы помочь тем,...
Оптимизация React Context шаг за шагом в 4 примерах
19.03.2023 13:03
При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после поставщика контекста. Это позволит избежать ненужных повторных рендеров.
Библиотека для работы с мороженым
19.03.2023 11:50
Лично я попрощался с операторами print() в python. Без шуток.
Настройка шаблона Metronic с помощью Webpack и Gulp
19.03.2023 06:15
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они постоянно обновляют версию (а нам нужно быстро наверстать упущенное!).