it-blog.club
Генерация Excel файла с помощью JS (jQuery)

Генерация Excel файла с помощью JS (jQuery)

У меня уже есть несколько статей на тему как работать с excel файлами при помощи PHP если интересно вот пара основных ссылок: Из кода в файл и Из файла в код

Но сейчас, как вы поняли из названия, речь пойдёт о том, как можно проще вывести html таблицу в xls файл при помощи одного простого JS плагина.

Заранее сообщу, что так как плагин написан при помощи библиотеки jQuery, её наличие на сайте будет ОБЯЗАТЕЛЬНЫМ требованием!

jQuery table2excel Plug-in

Данный плагин я нашёл совершенно случайно. И как оказалось, действительно, он не плохо справляется со своими обязанностями и способен без особых проблем вывести html таблицы в excel файл.

Как и любой другой плагин, вы можете его использовать двумя разными способами:

  1. Загрузить плагин от сюда. У вас будет скачан zip архив из которого вы забираете js файлы и размещаете у себя на сайте. В дальнейшем делаете локальное подключение.
  2. Второй способ, я считаю не совсем правильным, подключиться напрямую. Делать этого не стоит, так как не известно какие проблемы с сетью могут возникнуть на вашей стороне или на стороне сервера плагина. Но в любом случае подключается удалённо он вот так:

<script src = "http://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"> </ script>

Ну и думаю, что стоит приступить сразу к примеру его работы.


<style>
th, td {
font-size: 15px;
}
table, th, td {
border: 1px solid #979;
padding: 2px 3px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<table id="tableId">
<tr>
<th>ID</th>
<th>Фрукт</th>
<th>Цвет</th>
</tr>
<tr>
<td>01</td>
<td>Яблоко</td>
<td>Зелёное</td>
</tr>
<tr>
<td>02</td>
<td>Апельсин</td>
<td>Оранжевый</td>
</tr>
</table>
</body>

Далее пойдёт наш JS:


$(document).ready(function () {
$("#tableId").table2excel({
filename: "new.xls"
});
});

Сразу после загрузки страницы наш скрипт будет исполнен. При желании вы можете поставить какое либо своё событие. Ну например добавить кнопку, при клике по которой наш JS должен будет отработать.

Как вы заметили, мы использовали метод table2excel(), который как раз доступен из нашего плагина. В качестве параметров он принимает имя файла. В нашем случае, я его назвал new.xls. На данный момент указание формата является обязательным требованием. Ну по крайней мере я указывал.

Так же вы можете использовать форматирование текста непосредственно в самой таблице, например выделить заголовки таблицы при помощи тега <strong></strong>


<th><strong>ID</strong></th>
<th><strong>Фрукт</strong></th>
<th><strong>Цвет</strong></th>

Собственно на этом всё. Лично у меня особых проблем с данным плагином не возникло.


it-blog.club 2175
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать