База данных из javascript для веб страницы из excel на vba модуле

Как вставить таблицу Excel на сайт

Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer.

Суть работы сервиса простая. Нужно выделить и скопировать необходимую готовую таблицу или ее часть:

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

Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:

И вставляем к себе на сайт.

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

Вот как это может выглядеть:

Как видно на снимке, таблица выходит на границы сайта.

Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.

Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?

Один из способов, это просто загружать готовые файлы на сайт и приводить ссылки для скачивания этих файлов с таблицами.

Но, есть более интересный способ, который рассмотрим далее.

Способ №1. Стандартные средства Excel

Открываем программу и переходим в меню «Файл». Во вкладке «Открыть» кликаем на «Этот компьютер», затем «Документы» и находим в Проводнике нашу таблицу в формате html. После чего кликаем по ней два раза левой кнопкой мышки, чтобы она открылась в программе.

Недостаток такого метода в том, что таблицу придется серьезно редактировать. По сути, мы переводим в Excel только информацию. Чем лучше структура у html-таблицы, тем меньше придется редактировать ее в программе.

Чтобы сохранить таблицу в xls или xlsx формате, переходим снова в меню «Файл». Там заходим во вкладку «Сохранить как…», затем «Этот компьютер». Выбираем папку для сохранения и формат (тип файла).

Способ №3. Утилита для компьютера

Признаемся, мы не хотели писать о сторонних программах. Но не ожидали, что этот онлайн-сервис предложит такой вариант. В целом, можно попробовать – утилита весит чуть больше 50 Мб и устанавливается секунд 20.

Открываем программу после установки. Справа находим папку с файлом, который нужно конвертировать. По средине выпадает список файлов – выбираем нужный нам. Заметьте, что слева начинает отображаться содержимое файла.

После того как мы поставили маркер напротив html-файла, кликаем на верхней панели по зелено иконке XLS.

Выберете папку, куда нужно сохранить файл – и нажимайте Start.

После конвертации автоматически откроется окно Проводника с папкой, куда мы сохранили итоговый xlsx-файл. Заметьте, что программа автоматически форматирует таблицы в xlsx файлы, хотя на иконке написано xls.

Честно говоря, мы разочаровались. Программа Total HTML Converter ничем не отличается по результату от стандартного способа, который мы описывали под №1. Конвертация точно такая же – html-страница копируется сплошняком со всеми графическими элементами.

Examples

• Basic table
• Cells with data types
• Cell with line break
• Cell with format
• Cell with formula
• Merged cells
• Multiple sheets
• Conversion JS trigger
• Insert output into xlsx template
• Postprocess using xlsx

The following CSS properties are supported:

• — cell background color
• — cell foreground color
• — all the , , will be transformed into Excel cells borders.
• — text horizontal align in the Excel cell
• — vertical align in the Excel cell
• — the Excel column will get the highest width; it can be little bit inaccurate because of pixel to Excel points conversion
• — the Excel row will get the highest height
• — font family, defaults to
• — font size, defaults to
• — , and styles are supported
• — control whether the cell’s text should be bold or not
• — and are supported
• — the Excel cell will have text wrap enabled if this is set to scroll.

The following HTML attributes are supported:

• — numeric value that merges current column with columns to the right
• — numeric value that merges current row with rows below.

Извлечение данных из html

В понятие «парсинг», кроме извлечения текстового содержимого сайтов, html-страниц или файлов, входит поиск и извлечение конкретных данных из всего полученного текстового содержимого.

Парсинг содержимого тегов

Извлечение содержимого тегов с помощью метода getElementsByTagName объекта HTMLFile:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

SubPrimer1() DimmyHtml AsString,myFile AsObject,myTag AsObject,myTxt AsString ‘Извлекаем содержимое html-страницы в переменную myHtml с помощью функции GetHTML1 myHtml=GetHTML1(«https://internettovary.ru/sadovaya-nozhovka-sinitsa/») ‘Создаем объект HTMLFile SetmyFile=CreateObject(«HTMLFile») ‘Записываем в myFile текст из myHtml myFile.body.innerHTML=myHtml ‘Присваиваем переменной myTag коллекцию одноименных тегов, имя которого ‘указанно в качестве аргумента метода getElementsByTagName SetmyTag=myFile.getElementsByTagName(«p») ‘Выбираем, содержимое какого тега по порядку, начинающегося с 0, нужно извлечь myTxt=myTag(5).innerText MsgBox myTxt ‘Большой текст может не уместиться в MsgBox, тогда для просмотра используйте окно Immediate ‘Debug.Print myTxt EndSub

С помощью этого кода извлекается текст, расположенный между открывающим и закрывающим тегами. В примере — это текст 6-го абзаца (p) между 5-й (нумерация с 0) парой отрывающего <p> и закрывающего </p> тегов.

Примеры тегов, используемых в html: , , , , , , .

Пример извлечения содержимого тега :

1 2 3 4 5 6 7 8 9

SubPrimer2() DimmyHtml AsString,myFile AsObject,myTag AsObject,myTxt AsString myHtml=GetHTML1(«https://internettovary.ru/sadovaya-nozhovka-sinitsa/») SetmyFile=CreateObject(«HTMLFile») myFile.body.innerHTML=myHtml SetmyTag=myFile.getElementsByTagName(«title») myTxt=myTag().innerText MsgBox myTxt EndSub

Парсинг содержимого Id

Извлечение текстового содержимого html-элементов, имеющих уникальный идентификатор — Id, с помощью метода getElementById объекта HTMLFile:

1 2 3 4 5 6 7 8 9 10 11 12 13

SubPrimer3() DimmyHtml AsString,myFile AsObject,myTag AsObject,myTxt AsString myHtml=GetHTML1(«https://internettovary.ru/sadovaya-nozhovka-sinitsa/») SetmyFile=CreateObject(«HTMLFile») myFile.body.innerHTML=myHtml ‘Присваиваем переменной myTag html-элемент по указанному в скобках Id SetmyTag=myFile.getElementById(«attachment_465») ‘Присваиваем переменной myTxt текстовое содержимое html-элемента с Id myTxt=myTag.innerText MsgBox myTxt ‘Большой текст может не уместиться в MsgBox, тогда для просмотра используйте окно Immediate ‘Debug.Print myTxt EndSub

Для реализации представленных здесь примеров могут понадобиться дополнительные библиотеки. В настоящее время у меня подключены следующие (к данной теме могут относиться последние шесть):

• Visual Basic For Applications
• Microsoft Excel 16.0 Object Library
• OLE Automation
• Microsoft Office 16.0 Object Library
• Microsoft Forms 2.0 Object Library
• Ref Edit Control
• Microsoft Scripting Runtime
• Microsoft Word 16.0 Object Library
• Microsoft Windows Common Controls 6.0 (SP6)
• Microsoft ActiveX Data Objects 6.1 Library
• Microsoft ActiveX Data Objects Recordset 6.0 Library
• Microsoft HTML Object Library
• Microsoft Internet Controls
• Microsoft Shell Controls And Automation
• Microsoft XML, v6.0

С этим набором библиотек все примеры работают. Тестирование проводилось в VBA Excel 2016.

Виды гиперссылок

Если добавлять гиперссылку первым способом (напрямую в ячейку), то пользователь будет работать с диалоговым окном «Добавление гиперссылки», в котором предлагается 4 способа связи:

1. Файл, веб-страница (здесь указывается путь к файлу или адрес сайта).
2. Место в документе (лист или ячейка).
3. Новый документ (путь к новому документу).
4. Электронная почта (здесь указывается адрес получателя, который будет отображен при открытии Microsoft Outlook).

Существующие типы гиперссылок

Если вдруг нужно будет изменить или удалить существующую гиперссылку, достаточно щелкнуть на ней правой кнопкой мыши и выбрать соответствующий пункт («изменить» или «удалить гиперссылку»).

Такими довольно простыми способами можно создать гиперссылку в Excel. Наиболее простым и практичным способом является первый — через ячейку. Дело в том, что именно здесь собраны все варианты: можно создать ссылку на любое поле в документе, можно указать путь к файлу, адрес сайта и т.д. Хотя использовать можно любой из этих способов — как удобнее.

Расширенные параметры веб-запросов Excel

Вы заметите несколько дополнительных опций на экранах, описанных выше. Если вы предпочитаете очистить и импортировать веб-данные в другое место в электронной таблице Excel, щелкните стрелку раскрывающегося списка рядом с Нагрузка кнопку и вместо этого выберите Загрузить в.

Вы увидите открытое окно Импорт данных. Используйте параметры в этом окне, чтобы отформатировать и разместить данные именно так, как вы хотите, чтобы они отображались.

Варианты здесь включают:

• Стандартный стол
• Отчет сводной таблицы
• Сводная диаграмма
• Просто создайте соединение, но не импортируйте данные

Вы также увидите возможность разместить данные, начиная с определенной ячейки, а не с A1 по умолчанию.

Если вы выберете Передовой вместо Basic на странице URL-адреса можно предоставить более подробную информацию об URL-адресе.

Это полезно, если страница, с которой вы загружаете данные, включает параметры (обычно после символа «?») Или специальные запросы заголовка HTTP, например страницы, требующие параметров запроса заголовка JSON HTTP.

Эти расширенные функции запросов позволяют извлекать данные с помощью Excel даже с интерактивных веб-страниц, которые могут не иметь статического URL-адреса для доступа к данным.

Найти и удалить гиперссылки в Excel

В конце этой статьи вы узнаете

• Как найти и удалить все гиперссылки в Excel
• Как найти и удалить гиперссылки с определенным текстом и
• Удалите все гиперссылки за один раз.

Итак, без каких-либо адо мы перейдем к нему.

Найти и удалить все гиперссылки в Excel

Выбрать ячейки, из которых вы хотите удалить гиперссылки. Скажем, у меня есть образцы данных из 10 сайтов со ссылками на несколько сайтов.

Теперь я хочу удалить все гиперссылки, доступные в электронной таблице. Для этого я нажимаю « CTRL + F» на моей клавиатуре и откроет диалоговое окно « Найти и заменить ».

Нажмите « Внизу внизу кнопки `

Теперь нажмите стрелку вниз с кнопкой Формат «и выберите« Выбрать формат из ячейки ».

Выберите ячейку с гиперссылкой, и она отобразит предварительный просмотр (слева от кнопки «Формат») с гиперссылкой.

Нажмите кнопку « Найти все », и она отобразит все гиперссылки в Excel.

Вы можете выбрать одну или несколько гиперссылок из результата с помощью кнопок CTRL или Shift .

Чтобы удалить их, щелкните правой кнопкой мыши по выделенным ячейкам и выберите « Удалить гиперссылки «.

Найти и удалить гиперссылки с определенным текстом

В этом разделе мы увидим, как удалить гиперссылки в Excel, связанные с конкретным текстом. Скажем, у меня есть образцы данных продуктов, и некоторые из продуктов были связаны более одного раза. Итак, если я хочу гиперссылки, у которых есть текст « Продукт 3 ».

Нажмите « CTRL + F» , и откроется диалоговое окно «Найти и заменить».

В « Найти, что » введите текстовое поле текст « Продукт 3 ». Нажмите кнопку со стрелкой « Формат » и выберите « Выбрать формат из ячейки ».

Выберите ячейку с «Продуктом 3», и она отобразит предварительный просмотр (слева от кнопки «Формат») и нажмите кнопку «Найти все».

Он отобразит список гиперссылок с продуктом 3.

Выберите результат, удерживая клавишу Ctrl или Shift. Чтобы удалить их, щелкните правой кнопкой мыши по выделенным ячейкам и выберите «Удалить гиперссылки».

Удалить все гиперссылки за один раз

Чтобы удалить все гиперссылки в электронной таблице Excel, нажмите CTRL + A или нажмите треугольник, присутствующий в верхней части листа, чтобы выбрать всю электронную таблицу.

Теперь щелкните правой кнопкой мыши в любом месте листа и выберите «Удалить гиперссылки». Это приведет к удалению всех гиперссылок, присутствующих во всей электронной таблице.

Это простой способ найти и удалить гиперссылки в Excel.

Взгляните на дополнительные советы и подсказки Excel, чтобы получить максимальную отдачу от Excel.

Office.Live — программа для создания и редактирования таблиц

Данный сервис от компании Microsoft даёт возможность получить доступ к возможностям MS Office онлайн, причём совершенно бесплатно. В частности, вы можете воспользоваться функционалом сетевого редактора таблиц MS Excel, позволяющего создавать, редактировать и сохранять таблицы онлайн в популярных форматах данного редактора (xls, xlsx, xml и других).

1. Для работы с редактором перейдите на указанный ресурс https://office.live.com/start/Excel.aspx.
2. Выберите «Войти с помощью учётной записи Microsoft».
3. И создайте учётную запись (или воспользуйтесь учётными данными вашего аккаунта в Skype).
4. Далее вам откроется экран базовых шаблонов для создания таблицы excel. Нажмите на «Новая книга», и вы перейдёт в режим создания и редактирования вашей таблицы.
5. Для сохранения полученного результата нажмите на вкладку «Файл» — «Сохранить как» — «Скачать копию».

Как сделать в Экселе гиперссылку

Кроме обычных ссылок в Экселе есть еще такое понятие, как гиперссылка. Она работает таким же образом, как и на сайте: когда пользователь щелкнет на нее, откроется указанный ранее источник. Это может быть сайт в интернете, изображение или какой-то документ. С помощью этого можно автоматизировать рабочий процесс в Excel, открывая нужный сайт или документ всего одним щелчком мыши.

Существует 3 способа, как сделать в Экселе гиперссылку:

• напрямую в ячейку;
• с помощью объектов;
• с помощью функции.

Достаточно щелкнуть правой кнопкой мыши по любой ячейке и в появившемся списке выбрать пункт «Гиперссылка». Откроется новое окно, в котором необходимо указать адрес сайта или файл на компьютере. Также можно создать ее и через панель меню: «Вставка — Гиперссылка».

Теперь, когда вы знаете, как сделать простую гиперссылку, можно легко создать такую же ссылку с помощью объектов рабочего листа. К ним относятся любые изображения, надписи, фигуры, объекты WordArt, диаграммы и пр. Для этого нужно вызвать контекстное меню на одном из таких объектов и выбрать пункт «Гиперссылка». Кроме того, можно это сделать и с помощью комбинации клавиш — Ctrl+K.

Еще один вариант, как сделать гиперссылку, с помощью встроенной функции. Данная функция имеет следующий синтаксис: =Гиперссылка(адрес; ). Вызвать ее можно 2 способами:

• через панель меню «Вставка — Функция»;
• вручную.

Если воспользоваться первым способом, то сначала в появившемся окне необходимо будет найти функцию «Гиперссылка» (проще всего написать название функции в поле «Поиск функции»). После этого откроется еще одно окно, в котором надо будет заполнить 2 параметра — адрес и имя. Адрес — это местоположение ячейки, диапазона ячеек или объекта в документе. Здесь можно указать и страницу в интернете или путь к файлу на компьютере. А в поле «Имя» указывается наименование, которым будет подписано выбранное поле. Хотя заполнять его необязательно.

Можно сделать все это вручную, выделив необходимое поле и прописав: =гиперссылка(. После открытой скобки нужно будет указать адрес, поставить точку с запятой, указать имя гиперссылки, закрыть скобку и нажать «Enter». Например, можно написать в поле E1 такую формулу: =Гиперссылка(«yandex.ru»; «Открыть Яндекс»). В поле E1 будет написана фраза «Открыть Яндекс», щелкнув по которой вы откроете сайт в браузере.

Кроме того, существует еще один способ, как сделать гиперссылку, с помощью макросов. Но этот вариант слишком сложный: лучше использовать более простые варианты.

5 ответов

11

Пока Excel может открыть файл, встроена функциональность для изменения формата открытого файла.

Чтобы преобразовать файл .html, откройте его с помощью Excel (File — Open), а затем сохраните его как .xlsx файл из Excel (Файл — Сохранить как).

Чтобы сделать это с помощью VBA, код будет выглядеть так:

05 март 2012, в 23:49
Поделиться

3

Эта страница сделала (конвертировать html-код в csv/Excel):

30 сен. 2016, в 09:57
Поделиться

2

Мы скопируем/вставим html-страницы из нашего ERP в Excel, используя «paste special.. as html/unicode», и он отлично работает с таблицами.

05 апр. 2013, в 12:12
Поделиться

1

Вот решение для преобразования html-таблиц в xls-контент http://www.coolutils.com/Online/HTML-Converter/ работает как шарм

12 июнь 2014, в 13:00
Поделиться

1

Измените тип контента на ms-excel в html, и браузер откроет html в Excel как xls.
Если вы хотите, чтобы контроль над преобразованием HTML в excel использовал библиотеки POI для этого.

05 март 2012, в 13:38
Поделиться

Ещё вопросы

• 1Как расширить компонент Button и разрешить событие пробела
• 1Нахождение холста в визуальном дереве
• Как использовать регулярные выражения в MySQL запрос, чтобы удалить определенные символы?
• 1Один массив равен другому. Как заморозить одно при смене другого?
• 1Переместить объект-слайдер d3 в указанное место
• Хотите показать 3 записи в каждой строке таблицы в виде трех столбцов
• 1Ошибка при использовании статического метода с навесным декоратором
• Angularjs сбрасывает радиовход, если щелкнуть два раза подряд
• 1Верните одноэкземплярное действие обратно с помощью уведомления
• Указатели класса против ссылки
• 1Как поставить приложение в фоновом режиме?
• Объединить несколько строк иерархических данных
• создать динамическую растущую ширину для контента
• 1Сборный размер Unity
• Javascript моя функция не будет работать во второй раз, когда он нажал
• 1Нужно конвертировать действительные значения даты и вывести ошибочные значения в Python
• 1Как заставить работать внутренние плагины eslint без префикса eslint-plugin- *
• Как отобразить массив объектов в шаблоне страницы в Pyramid?
• 1Я не могу использовать более одного шрифта в Pygame
• 1Получать хеш-строку разных приложений каждый раз | API SMS Retriever
• Chrome DevTools игнорирует изображение с «facebook» в имени файла
• Когда флажок установлен, отключите текстовые поля
• 1C # объект или массив
• Используйте поиск с атрибутом данных
• PDO вставляет последний идентификатор вставки в две таблицы
• 1Как передать параметр в JavaScript найти функцию?
• Как выбрать элемент кроме его дочерних элементов?
• 1Чистая архитектура входа в систему
• 1Как получить строку текста, которая находится между двумя ‘{‘ круглыми скобками ‘}’, установленными с помощью .NET?
• Является ли состояние, отображаемое в дампе сбоя приложения, точным в Windows при получении из диспетчера задач?
• 1Проблемы при переносе узла с угловым ИЛИ, как создать среднее приложение без использования angular-cli
• 1Статические кнопки под ScrollView с динамическим расположением таблиц внутри
• Функция триггера отображает «Глобальные события не поддерживаются и устарели»
• Хранить индексы геометрии
• 1Ошибки Entity Framework Validation неправильно обрабатываются клиентом breeze.sharp
• Пользователь Apache не может подключиться к SMTP (Centos)
• WinDivert 1.0.5 DivertRecv () Метод Получить последнюю ошибку 998
• Проблемы вычисления выражения постфикса с более чем двумя операндами
• Проблема со значением комбинированного списка jqWidgets с формой
• Javascript Если заявление не работает в автозаполнении
• 1Как создать новый XML DOC со свойствами из существующего?
• 1Как заставить мое приложение заставить мышь исчезать во всех окнах только во время работы моего приложения
• Как выделить выделенный узел в виде дерева (jquery)?
• 1Разделить ArrayList на несколько ArrayList в зависимости от ввода пользователя
• Angularjs контроллер в комплекте
• 1Vision API Cropping Face Landmark
• Подсчет всех предыдущих вхождений класса в DOM
• 1Понимание вывода pdb после pdb.set_trace ()
• Как я могу получить несколько подпапок / пространств имен в модуле ZF2
• Отключение выбора, когда флажок установлен

Импорт данных из HTML с помощью Google Диска

Чтобы импортировать данные из HTML и вставить их в электронную таблицу, которую затем можно открыть и управлять с помощью Microsoft Excel, вы можете использовать малоизвестную функцию Google Диска.

После входа в свою учетную запись Google, просто перейдите на домашнюю страницу службы Drive затем нажмите «Создать» и выберите «Google Таблицы».

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Предположим, вы хотите импортировать список существующих фильмов на этой странице Википедии.

Как иметь каждый столбец таблицы в электронной таблице Excel, в данном случае на Google Диске?

Просто дважды щелкните, например, первую ячейку, а затем вставьте в нее следующую формулу:

= ImportHTML («https://it.wikipedia.org/wiki/Film_con_maggiori_incassi_nella_storia_del_cinema»; «таблица»; 2)

Число, указанное в формуле (в данном случае 2), позволяет сообщить Google Диску, какая таблица в порядке появления на указанной веб-странице должна быть автоматически импортирована.

Чтобы понять, какую таблицу необходимо импортировать, предлагаем открыть интересующую страницу в браузере, а затем получить доступ к ее исходному HTML-коду (обычно достаточно использовать комбинацию клавиш CTRL+U).

На этом этапе мы предлагаем нажать CTRL + F и найти строку

Связав номер 1 с первой таблицей, номер 2 со второй и так далее, можно будет установить номер таблицы, содержащей импортируемые данные, и указать его в формуле.

В том случае, если импортируемые данные были опубликованы с использованием HTML-списка (тег ol или ul), в формуле, переданной на Google Диск, просто замените таблицу на список.

Нажав кнопку Enter, через несколько секунд ожидания все данные в таблице, опубликованной в Интернете, будут автоматически импортированы в электронную таблицу.

Импортированные данные можно скопировать (операция копирования и вставки) и вставить в Excel или любую другую электронную таблицу или экспортировать в виде файла и сохранить локально.

How to display Excel data in HTML Table using Javascript?

Follow the below steps to display excel data in the HTML table:

1. Define HTML
2. Includes the SheetJS library
3. Write the Javascript logic to upload and validate the Excel file
4. Read the Excel data into JSON format
5. Convert JSON data to the HTML table

1. Define HTML

First, we will define the HTML to allow users to upload an Excel file and display it in tabular format. We will define an HTML  tag with type=”file” to choose an Excel file. And a  tag to upload the file and an HTML <table> tag to display the data.

Let’s define the below HTML code in an HTML document file:

<h1>Upload an excel file to display in HTML Table</h1>
<!-- Input element to upload an excel file -->
<input type="file" id="file_upload" />
<button onclick="upload()">Upload</button>  
<br><br>
<!-- table to display the excel data -->
<table id="display_excel_data"></table>

2. Includes the SheetJS library

Include the CDN link of library xlsx.min.js in the  tag of an HTML file as follows:

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.min.js"></script>
</head>

3. Write the Javascript logic to upload and validate the Excel file

We will define a javascript method to upload and validate the Excel file. The method will allow users to upload a valid Excel file only. Let’s see the below logic that we have to write in tag:

// Method to upload a valid excel file
function upload() {
  var files = document.getElementById('file_upload').files;
  if(files.length==0){
    alert("Please choose any file...");
    return;
  }
  var filename = files.name;
  var extension = filename.substring(filename.lastIndexOf(".")).toUpperCase();
  if (extension == '.XLS' || extension == '.XLSX') {
      //Here calling another method to read excel file into json
      excelFileToJSON(files);
  }else{
      alert("Please select a valid excel file.");
  }
}

4. Read Excel file in Javascript and convert it into JSON format

We have defined a javascript method that will read the Excel file and convert the data into JSON format. Inside , we have read the data of the Excel file by using a file reader as a binary string using  method. After that, we used XLSX which has a built-in facility to convert our binary string into a JSON object. And the  method is used to read sheet data in JSON.

Let’s see the code below:

//Method to read excel file and convert it into JSON 
function excelFileToJSON(file){
		  try {
			var reader = new FileReader();
			reader.readAsBinaryString(file);
			reader.onload = function(e) {

				var data = e.target.result;
				var workbook = XLSX.read(data, {
					type : 'binary'
				});
				var result = {};
				var firstSheetName = workbook.SheetNames;
                //reading only first sheet data
				var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets);
				alert(JSON.stringify(jsonData));
				//displaying the json result into HTML table
				displayJsonToHtmlTable(jsonData);
				}
			}catch(e){
				console.error(e);
			}
}

5. Convert JSON data to the HTML Table using Javascript

Now we have defined a javascript method to display the JSON data in an HTML table.

Let’s see the code:

//Method to display the data in HTML Table
function displayJsonToHtmlTable(jsonData){
		var table=document.getElementById("display_excel_data");
		if(jsonData.length>0){
			var htmlData='<tr><th>Student Name</th><th>Address</th><th>Email ID</th><th>Age</th></tr>';
			for(var i=0;i<jsonData.length;i++){
				var row=jsonData;
				htmlData+='<tr><td>'+row+'</td><td>'+row
				      +'</td><td>'+row+'</td><td>'+row+'</td></tr>';
			}
			table.innerHTML=htmlData;
		}else{
			table.innerHTML='There is no data in Excel';
		}
}