Convert Excel to HTML Table using JavaScript

Read excel file and display in html

I have an excel file that contains data. I want to read that file and display the results in html / web page using JS or Angular JS.

that what i need, i have data in excel file and want to get those one by one. but not able to understand that. I know from data base but need from excel file

4 Answers 4

A very simple way of reading an *.xslx file in a browser:

(displaying the results in html / web page using JS or Angular JS is trivial after that, though I’d suggest React over Angular)

import readXlsxFile from 'read-excel-file' const input = document.getElementById('input') input.addEventListener('change', () => < readXlsxFile(input.files[0]).then((data) =>< // `data` is an array of rows // each row being an array of cells. >) >) 

In the example above data is raw string data. It can be parsed to JSON with a strict schema by passing schema argument. See API docs for an example of that.

SheetsJS/js-xlsx Github repository is designed for working with XLSX files in web development. This would be really useful for you. Read up on this and learn how to use it, no need to reinvent the wheel either. Good luck.

Читайте также:  Стилизуем горизонтальные разделители с помощью CSS

one problem I discovered with this library is it does not read formatting information of the cells in excel file. so if you are using this library to pipe some excel file created elsewhere through it to convert it to html table, formatting info will be lost. gist.github.com/SheetJSDev/24b8acd317d01999d721b38de7c53021

JsZip did this very efficently. Take a look at it. And refer link to read local file using JSZip, you can then need to process to get the data in the excel file. Digging through the help documents will let you know how to do so.

jszip is a library for creating/reading/editing zip files. It is true that a xlsx file is a zip file, but jszip is not enough to get a xlsx sheet as a Javascript array or object.

jszip actually enables one to decompress an XLSX file as shown in github.com/catamphetamine/read-excel-file

       
Convert Excel to HTML Table using JavaScript

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Быстро и «грязно»: excel to html

Не уверен, что об этом писали здесь и считаю своим долгом поделиться этим хаком.

Иногда приходит менеджер и говорит: — Хочу эту таблицу видеть на сайте.
И уходит.
Вырисовывается два стандартных пути:
— либо через некую админку в редакторе ваять таблицу и заполнять ее значениями;
— либо ручками сразу в html и также наполнять значениями.
И ладно, если там 3х5 ячеек, а если больше.

Столкнувшись с подобным несколько лет назад я открыл для себя метод, базирующийся на использовании Windows Live Writer (софт написания и отправки постов в некоторые блоггерские платформы).

Все просто. Скопированную таблицу вставляем в WLW специальной вставкой с сохранением формата

image

затем переходим на нижнюю вкладку «Source» в WLW и копируем из поля весь огромный код

image

Получается так или почти так, как в оригинале. Времени занимает секунды, если не считать одноразовых затрат на прикрепление WLW к какой-нибудь блого-учетке.
Пример тут codepen

раз уж карма и рейтинг упали, допишу тут для всех, кто предлагает всевозможный save as из excel.

1. сохранить как «Веб страница в одном файле». Вариант «… веб страница» рассматривать не буду, т.к. он создает папку с четырьмя файлами.

В итоге получаем единую страницу с текстом на 320 строк.

image

там еще надо найти необходимое для использования…

Источник

Excel файл электронных таблиц html

Предположим, у вас есть диапазон ячеек, и вы хотите преобразовать диапазон ячеек в таблицу html, как показано на скриншоте ниже, как вы можете быстро с этим справиться? В этой статье я расскажу о некоторых приемах, которые помогут вам легко преобразовать лист или диапазон ячеек в HTML-таблицу в Excel.

ячейка документа в таблицу HTML 1

Преобразование ячеек в таблицу html с помощью команды Сохранить как
Преобразование ячеек в таблицу html с формулами
Преобразование ячеек в таблицу html с помощью Kutools for Excel

Преобразование ячеек в таблицу html с помощью команды Сохранить как

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

ячейка документа в таблицу HTML 2

1. Выберите ячейки, которые нужно преобразовать, и нажмите Файл > Сохранить как > Приложения Показать Сохранить как окно. Смотрите скриншот:

ячейка документа в таблицу HTML 3

2. в Сохранить как в окне укажите папку, в которую вы собираетесь поместить таблицу html, введите имя файла, которое вы используете, а затем выберите веб-страницы от Сохранить как раскрывающийся список. Затем вы можете сохранить рабочую книгу или только выбор в таблице html, установив флажок Вся книга or Выбор вариант. Смотрите скриншот:

ячейка документа в таблицу HTML 4

3. Нажмите Save., чтобы Опубликовать как веб-страницу появится диалоговое окно, и вы можете нажать Изменить чтобы указать заголовок, если вы хотите автоматически обновлять и повторно публиковать html-таблицу каждый раз, установите флажок Автоматически переиздавать каждый раз при сохранении книги, и если вы хотите автоматически открывать эту веб-страницу после сохранения, установите флажок Открыть опубликованную веб-страницу в браузере. Смотрите скриншот:

ячейка документа в таблицу HTML 1

4. Нажмите Опубликовать чтобы закончить сохранение.

Преобразование ячеек в таблицу html с формулами

ячейка документа в таблицу HTML 5

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

ячейка документа в таблицу HTML 6

1. Введите эти тексты в диапазон ячеек, как показано на скриншоте ниже:

ячейка документа в таблицу HTML 7

2. Затем перейдите к следующей ячейке, это H1, и введите эту формулу. =D1&E1&A1&F1&E1&B1&F1&E1&C1&F1&G1 , нажмите Enter, а затем перетащите формулу в нужную ячейку.

ячейка документа в таблицу HTML 8

3. Затем скопируйте эти ячейки формулы и вставьте их как значение в другое место. Выберите ячейки формулы и нажмите Ctrl + C и выберите пустую ячейку, J1 и щелкните правой кнопкой мыши, чтобы выбрать Вставить как значение в контекстном меню. Смотрите скриншот:

ячейка документа в таблицу HTML 9

4. Затем вы можете скопировать диапазон ячеек в редактор HTML и ввести стол tbody и / tbody / table отдельно в начало и конец диапазона строк. Смотрите скриншот:

Теперь ячейки Excel преобразованы в таблицу html.

Преобразование ячеек в таблицу html с помощью Kutools for Excel

Если у вас есть Kutools для Эксеl — удобный инструмент Excel, вы можете применить его Диапазон экспорта в файл утилита для быстрого преобразования ячеек Excel в таблицу HTML / таблицу PDF / текстовую таблицу Unicode и т. д. по мере необходимости.

После бесплатная установка Kutools for Excel, пожалуйста, сделайте следующее:

ячейка документа в таблицу HTML 10

1. Выберите диапазон ячеек, который хотите использовать, и щелкните Предприятие > Импорт/Экспорт > Диапазон экспорта в файл. Смотрите скриншот:

2. в Диапазон экспорта в файл диалог, проверьте Простой HTML or Сложный HTML (все форматирование) вариант по своему усмотрению, а затем укажите желаемое место назначения для экспорта. Смотрите скриншот:

Простой HTML: Выбранный диапазон экспортируется с линиями сетки, и в экспортируемом файле можно зарезервировать следующие параметры: цвет фона, имя шрифта, размер шрифта, цвет шрифта, полужирный курсив, ширина столбцов и горизонтальное выравнивание.

ячейка документа в таблицу HTML 11

Сложный HTML: Все форматы выбранного диапазона будут сохранены в конечном файле.

ячейка документа в таблицу HTML 12

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

ячейка документа в таблицу HTML 13

4. Нажмите Ok, и диапазон был преобразован в таблицу html.

Лучшие инструменты для офисной работы

Превратите часы в минуты с Kutools for Excel!

Готовы ускорить свои задачи в Excel? Используйте силу Kutools for Excel — ваш лучший инструмент для экономии времени. Оптимизируйте сложные задачи и скользите по своим данным, как профессионал. Испытайте Excel с молниеносной скоростью!

Зачем тебе Kutools for Excel

🇧🇷 Более 300 мощных функций: Kutools содержит более 300 расширенных функций, упрощающих вашу работу в более чем 1500 сценариях.

📈 Превосходная обработка данных: объединяйте ячейки, удаляйте дубликаты и выполняйте расширенные преобразования данных — и все это без особых усилий!

🇧🇷 Эффективные пакетные операции: Зачем прилагать дополнительные усилия, если можно работать с умом? С легкостью импортируйте, экспортируйте, комбинируйте и корректируйте данные.

📊 Настраиваемые диаграммы и отчеты: доступ к множеству дополнительных диаграмм и создание информативных отчетов, рассказывающих историю.

🇧🇷 Мощная панель навигации: Получите преимущество благодаря надежному диспетчеру столбцов, диспетчеру рабочих листов и пользовательскому избранному.

. Семь типов раскрывающихся списков: Упростите ввод данных с помощью раскрывающихся списков различных функций и типов.

🎓 Удобный: простой инструмент для начинающих и мощный инструмент для экспертов.

Office Tab Добавляет в Office интерфейс с вкладками и значительно упрощает вашу работу

  • Включение редактирования и чтения с вкладками в Word, Excel, PowerPoint , Издатель, доступ, Visio и проект.
  • Открывайте и создавайте несколько документов на новых вкладках одного окна, а не в новых окнах.
  • Повышает вашу продуктивность на 50% и сокращает количество щелчков мышью на сотни каждый день!

Источник

Оцените статью