{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Доброе утро. В этой статье рассмотрим как сделать простую таблицу в HTML и сделаем кнопку скачать, для того чтобы сохранить нашу таблицу к себе на ПК.","type":"unstyled","key":"59uhc"},{"data":{"image":{"id":"64ddc72347fba734e1ec94ae"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6nm9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ei64s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, приступим..","type":"unstyled","key":"93fdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала создаем простой файл test.html в любом месте на своем ПК. ","type":"unstyled","key":"dq90a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишем на HTML нашу простенькую таблицу такого вида:","type":"unstyled","key":"1cugi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n \n\t\t \n\t\t \n\t\t \n \n \n

Заголовок 1	Заголовок 2	Заголовок 3
Первый столбец	Второй столбец	Третий столбец

","type":"blockquote","key":"aijs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег table отвечает за создание таблицы, внутри него указываются строки и ячейки.","type":"unstyled","key":"f69v8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег tr - создание новой строки таблицы. Тег th - создание ячейки заголовка таблицы. И тег td - это созданий обычной ячейки в таблице.","type":"unstyled","key":"evkrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так же мы указываем id нашей таблицы в теге table для дальнейшей обработки таблицы скриптом и конвертации ее в excel.","type":"unstyled","key":"f026c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простая таблица готова, теперь приступим к конвертации ее в excel, для этого нам потребуется подключить дополнительный скрипт-библиотеку table-toexcel. Подключается она очень просто вставкой такой строки:","type":"unstyled","key":"dnbuv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fvlhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В любом месте нашего файла. Но это еще не все. Нужно заставить отрабатывать нашу подключенную библиотеку при нажатии кнопки.","type":"unstyled","key":"dtq5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чуть ниже нашей таблицы можно вставить такой код:","type":"unstyled","key":"63dkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"669jc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим более подробно. ","type":"unstyled","key":"3c0u6"},{"data":{"image":{"id":"64ddc72d72283b41bf8775f9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблица на HTML и сохранение ее в EXCEL","type":"atomic:image","key":"9i8q2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В первой строке в переменную button в которую мы передаем элемент соответствующий селектору #button-excel т.е нашу кнопку.","type":"unstyled","key":"7qej2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":144,"offset":15,"style":"ITALIC"}],"text":"Далее, строкой button.addEventListener(\"click\", e => { мы слушаем событие нажатия нашей кнопки, и если было нажатие, то выполняется код внутри фигурных скобок.","type":"unstyled","key":"1ied0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":132,"offset":0,"style":"ITALIC"}],"text":"let table = document.querySelector(\"#simpleTable1\"); - тут опять делаем выборку по id нашей таблицы и записываем в переменную table.","type":"unstyled","key":"4o25h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":141,"offset":0,"style":"ITALIC"}],"text":"И в конце, методом TableToExcel.convert, который как раз, и содержится в нашей подключенной библиотеке мы конвертируем нашу табличку в excel.","type":"unstyled","key":"2vhaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"Ничего сложного. ","type":"unstyled","key":"dsjr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"TzVn8KMZejeaKF8RAqjD"}],"entityMap":{}},"mentions":[]}