Доброе утро. В этой статье рассмотрим как сделать простую таблицу в HTML и сделаем кнопку скачать, для того чтобы сохранить нашу таблицу к себе на ПК.
Итак, приступим..
Для начала создаем простой файл test.html в любом месте на своем ПК.
Пишем на HTML нашу простенькую таблицу такого вида:
<table id="simpleTable1">
<tbody>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>Первый столбец</td>
<td>Второй столбец</td>
<td>Третий столбец</td>
</tr>
</tbody>
</table>
Тег table отвечает за создание таблицы, внутри него указываются строки и ячейки.
Тег tr - создание новой строки таблицы. Тег th - создание ячейки заголовка таблицы. И тег td - это созданий обычной ячейки в таблице.
Так же мы указываем id нашей таблицы в теге table для дальнейшей обработки таблицы скриптом и конвертации ее в excel.
Простая таблица готова, теперь приступим к конвертации ее в excel, для этого нам потребуется подключить дополнительный скрипт-библиотеку table-toexcel. Подключается она очень просто вставкой такой строки:
<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
В любом месте нашего файла. Но это еще не все. Нужно заставить отрабатывать нашу подключенную библиотеку при нажатии кнопки.
Чуть ниже нашей таблицы можно вставить такой код:
<script>
let button = document.querySelector("#button-excel");
button.addEventListener("click", e => {
let table = document.querySelector("#simpleTable1");
TableToExcel.convert(table);
});
</script>
Рассмотрим более подробно.
В первой строке в переменную button в которую мы передаем элемент соответствующий селектору #button-excel т.е нашу кнопку.
Далее, строкой button.addEventListener("click", e => { мы слушаем событие нажатия нашей кнопки, и если было нажатие, то выполняется код внутри фигурных скобок.
let table = document.querySelector("#simpleTable1"); - тут опять делаем выборку по id нашей таблицы и записываем в переменную table.
И в конце, методом TableToExcel.convert, который как раз, и содержится в нашей подключенной библиотеке мы конвертируем нашу табличку в excel.
Ничего сложного.