Экспорт JS в Excel

Обновлено: 21.11.2024

Руководство по PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel

Вторник, 13 июля 2021 г.

В этом руководстве вы найдете решение проблемы экспорта или загрузки данных таблицы HTML в таблице Excel с помощью JavaScript. Экспорт данных в Excel является обязательной функцией нашего веб-приложения. Поскольку функция экспорта данных помогает загружать данные из веб-приложения в другой формат файла для автономного использования данных, а этот формат Excel идеально подходит для экспорта данных в файл для автономного использования. Мы опубликовали множество руководств по экспорту данных, чтобы преуспеть в написании сценариев на стороне сервера с использованием PHP. Но если мы можем выполнить на стороне клиента экспорт данных в таблицу Excel, это снизит нагрузку на сервер. Итак, для экспорта данных в Excel здесь мы будем использовать JavaScript для выполнения экспорта данных на стороне клиента в таблицу Excel.

Функция экспорта на стороне клиента сделает наше веб-приложение более удобным для пользователя. Таким образом, с помощью JavaScript мы можем экспортировать данные таблицы HTML в формат Excel без обновления веб-страницы. В этом руководстве вы можете узнать, как экспортировать данные таблицы HTML в Excel с помощью JavaScript. В этом руководстве мы будем использовать библиотеку JavaScript SheetJS для экспорта данных таблицы HTML в Excel.

Этапы экспорта данных таблицы HTML в Excel с помощью JavaScript

1. Данные таблицы HTML

Для экспорта данных HTML в Excel сначала нам нужно загрузить некоторые данные в таблицу HTML. Итак, здесь мы получаем данные таблицы сотрудников и загружаем их в таблицу HTML со столбцами таблицы, такими как имя, адрес, пол, обозначение и возраст. Здесь мы создали HTML-таблицу с идентификатором employee_data. Итак, этот идентификатор мы будем использовать для извлечения данных этой таблицы HTML в коде JavaScript. В этом HTML-коде мы создали один тег кнопки с идентификатором export_button, поэтому при нажатии на эту кнопку данные таблицы HTML будут загружаться в формате файла Excel без обновления веб-страницы с помощью JavaScript.

2. Код JavaScript

В этом руководстве мы использовали библиотеку JavaScript SheetJS для экспорта данных HTML-таблицы в Excel с помощью JavaScript. Итак, сначала мы должны включить следующую ссылку на библиотеку SheetJS в заголовок этой веб-страницы HTML.

В части кода JavaScript сначала мы создаем функцию html_table_to_excel(type). Эта функция использует функцию библиотеки SheetJS и преобразует или записывает данные таблицы HTML в формат Excel и загружает их в браузер без обновления веб-страницы.

После того, как функция готова, мы должны вызвать функцию html_table_to_excel(type) для события нажатия кнопки, поэтому для события нажатия кнопки триггера мы используем метод addEventListener. Поэтому, когда пользователь нажимает кнопку, функция html_table_to_excel(type) вызывается с типом файла xlsx. Таким образом, он будет загружать данные таблицы HTML в файле Excel формата .xlsx в браузере без обновления веб-страницы на стороне клиента.

Заключение

Это руководство поможет вам добавить функцию экспорта для загрузки данных таблицы HTML в таблицу Excel без использования стороннего подключаемого модуля jQuery или какого-либо сценария на стороне сервера. Следуя этому руководству, вы сможете легко экспортировать данные таблицы HTML в Excel, используя минимальный код JavaScript.

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

JavaScript – это универсальная платформа, позволяющая легко настраивать клиентские инструменты для написания сценариев. В некоторых приложениях полезно иметь какой-то интерфейс электронной таблицы, который легко кодировать и поддерживать. Клиентский компонент электронной таблицы JavaScript SpreadJS, входящий в состав пакета SpreadJS, идеально подходит для этого.

Импорт/экспорт в Excel в JavaScript

Попробуйте компоненты электронных таблиц SpreadJS

Загрузить последнюю версию SpreadJS

Настройка проекта электронной таблицы JavaScript

Для начала мы можем использовать файлы SpreadJS, размещенные в NPM. Для этого мы можем установить с помощью аргумента командной строки. Откройте командную строку и перейдите к местоположению вашего приложения. Там вы можете установить необходимые файлы с помощью одной команды.

В этом случае нам понадобится базовая библиотека электронных таблиц, Spread-ExcelIO и jQuery:

npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery

После их установки мы можем добавить ссылки на эти скрипты и файлы css в наш код:

Затем добавьте на страницу сценарий, который инициализирует компонент Spread.Sheets, и элемент div, который будет его содержать (поскольку компонент электронных таблиц SpreadJS использует холст, это необходимо для инициализации компонента):

Добавить код импорта Excel

Нам нужно создать экземпляр клиентского компонента ExcelIO, который мы можем использовать для фактического открытия файла:

Затем нам нужно добавить функцию для импорта файла. В этом примере мы импортируем локальный файл, но вы можете сделать то же самое с файлом на сервере. Если вы импортируете файл с сервера, вам необходимо указать местоположение. Ниже приведен пример элемента ввода, в котором пользователь может ввести местоположение файла:

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

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

Независимо от того, ссылаетесь ли вы на файл на сервере или локально, вам необходимо добавить в свой скрипт внутри функции $(document).ready следующее:

Добавление данных в импортированный файл Excel

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

Теперь мы можем использовать скрипт Spread.Sheets, чтобы добавить в этот файл еще одну строку доходов. Давайте добавим на страницу кнопку, которая будет делать именно это:

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

  • индексы строк и столбцов источника и назначения
  • количество строк и столбцов
  • значение CopyToOptions для стиля

Весь следующий код скрипта для добавления данных и спарклайна будет содержаться в этом обработчике события нажатия кнопки. Для большинства данных мы можем использовать функцию setValue. Это позволяет нам установить значение на листе в Spread, передав индекс строки, индекс столбца и значение:

Задайте формулу СУММ в столбце P, чтобы она соответствовала другим строкам, и задайте процент для столбца Q:

Наконец, мы можем скопировать формулы из предыдущих строк в новую строку для столбцов с R по AD, снова используя функцию copyTo, на этот раз с помощью CopyToOptions.formula:

Добавление спарклайна

Теперь мы можем добавить спарклайн для сопоставления с другими строками данных. Для этого нам нужно предоставить диапазон ячеек для получения данных и некоторые настройки для спарклайна. В этом случае мы можем указать:

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

После этого вызываем метод setSparkline и указываем:

  • место для спарклайна
  • расположение данных
  • ориентация спарклайна
  • тип спарклайна
  • созданные нами настройки

Если бы вы попытались запустить код сейчас, это могло бы показаться немного медленным, потому что рабочая книга перерисовывается каждый раз, когда данные изменяются и добавляются стили. Чтобы резко ускорить его и повысить производительность, в Spread.Sheets предусмотрена возможность приостанавливать отрисовку и службу расчета. Давайте добавим код для приостановки перед добавлением строки и ее данных, а затем возобновления обоих после:

После того как мы добавим этот код, мы сможем открыть страницу в веб-браузере и увидеть, как файл Excel загружается в Spread.Sheets с добавленной строкой дохода. Важно: имейте в виду, что Chrome не позволяет вам открывать локальные файлы в целях безопасности, поэтому вам необходимо использовать веб-браузер, такой как Firefox, для успешного запуска этого кода. В качестве альтернативы, если вы загружаете файл с URL-адреса веб-сайта, он должен нормально открываться в любом браузере.

Добавление кода экспорта в Excel

Наконец, мы можем добавить кнопку для экспорта файла с добавленной строкой. Для этого мы можем использовать клиентский код ExcelIO, встроенный в Spread.Sheets:

Этот код получает имя файла экспорта из элемента ввода exportFileName. Мы можем определить его и позволить пользователям назвать файл следующим образом:

Затем мы можем добавить кнопку, которая вызывает эту функцию:

Добавив строку дохода, вы можете экспортировать файл с помощью кнопки "Экспорт файла". Обязательно добавьте внешнюю библиотеку FileSaver, чтобы пользователи могли сохранять файл там, где они хотят:

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

Это всего лишь один пример того, как вы можете использовать электронные таблицы SpreadJS JavaScript для добавления данных в файлы Excel, а затем экспортировать их обратно в Excel с помощью простого кода JavaScript.

Загрузить образец

В другой серии статей мы демонстрируем, как импортировать/экспортировать электронные таблицы Excel в другие платформы Javascript:

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

Функции экспорта на стороне клиента делают веб-приложение удобным для пользователя. Используя JavaScript, данные таблицы HTML можно легко экспортировать без обновления страницы. В этом руководстве мы покажем вам, как экспортировать данные таблицы HTML в Excel с помощью JavaScript. Функцию экспорта JavaScript можно использовать в списке участников, списке продуктов или других списках для загрузки списка данных в формате файла Excel.

Экспорт данных таблицы HTML в Excel

Код JavaScript:
Функция exportTableToExcel() преобразует данные таблицы HTML в формат Excel и загружает их в виде файла XLS (.xls).

  • Идентификатор таблицы — обязательно. Укажите идентификатор таблицы HTML для экспорта данных.
  • имя файла — необязательно. Укажите имя файла для загрузки данных Excel.

Данные HTML-таблицы.
Таблица HTML содержит некоторые данные о пользователях с некоторыми основными полями, такими как имя, адрес электронной почты, страна.

Кнопка запускает функцию exportTableToExcel() для экспорта данных таблицы HTML с помощью JavaScript.

Если вы хотите экспортировать данные с произвольным именем файла, передайте желаемое имя файла в функцию exportTableToExcel().

Заключение

Наш пример кода поможет вам добавить функцию экспорта в HTML-таблицу без каких-либо сторонних плагинов jQuery или скриптов на стороне сервера. Вы можете легко экспортировать данные таблицы, используя минимальный код JavaScript. Кроме того, функциональность примера кода можно легко расширить или настроить в соответствии с вашими потребностями.

Хотите получить помощь по внедрению, изменить или улучшить функциональность этого скрипта? Отправить запрос на платную услугу

Если у вас есть какие-либо вопросы об этом скрипте, отправьте его нашему сообществу контроля качества — Задайте вопрос

Вы когда-нибудь нуждались в онлайн-инструменте для экспорта таблиц HTML в файлы других форматов (csv, xls, pdf и т. д.), чтобы можно было работать с табличными таблицами в сторонних приложениях, таких как Excel, PDF и т. д.?

Вот набор из 10 лучших плагинов Vanilla JavaScript и jQuery, которые упрощают экспорт данных таблиц в Microsoft Excel, CSV, TXT на стороне клиента. Получайте удовольствие от этого.

Первоначально опубликовано 4 октября 2020 г., обновлено 6 октября 2021 г.

Оглавление:

Лучшие плагины jQuery для экспорта таблиц

Экспорт таблицы Html в электронную таблицу Excel с помощью jQuery — table2excel

table2excel – это простой, но полезный подключаемый модуль jQuery, который позволяет экспортировать данные таблицы HTML в файл Excel.

Экспорт HTML-таблицы в JSON/CSV/TXT/PDF — TableHTMLExport

Многофункциональный подключаемый модуль jQuery для экспорта таблиц, который экспортирует вашу HTML-таблицу и загружает табличные данные в виде файлов JSON, CSV, TXT или PDF.

Экспорт HTML-таблиц в CSV/XLS/XLSX/текст — jQuery TableExport

Еще один подключаемый модуль jQuery, который позволяет экспортировать html-таблицы в электронные таблицы XML (XLSX), электронные таблицы Microsoft Excel (XLS), табличные данные CSV и обычный текст.

Экспорт данных таблицы и JSON в Excel с помощью jQuery — ExportToExcel

Простой кроссбраузерный подключаемый модуль jQuery Excel Export, который позволяет загружать HTML-таблицу и данные JSON/XML в виде файла Excel .xls.Для пользователей IE переименуйте загруженный файл в .xls.

Плагин jQuery для экспорта данных таблицы в файл CSV — table2csv

Просто еще один конвертер таблиц на основе jQuery в CSV, который экспортирует вашу HTML-таблицу в загружаемый файл CSV.

Экспорт таблицы HTML в файл CSV — jQuery csvExport

Еще один подключаемый модуль jQuery Table To CSV, который преобразует любые табличные данные в значения, разделенные запятыми, которые затем можно загрузить в виде файла CSV.

Лучшие плагины для экспорта таблиц JS

Кроссбраузерный конвертер HTML-таблиц в Excel — saveAsExcel.js

Легкая библиотека JavaScript, которая позволяет экспортировать данные таблицы html в файл MS Excel.

Экспорт табличных данных в Excel — table2excel.js

Стандартный экспортер таблиц JavaScript в Excel, который позволяет пользователю загружать данные таблицы в виде файла Excel (xls).

Преобразование HTML-таблицы в CSV – table2csv

Вариантный конвертер таблиц JavaScript в CSV, который считывает и сохраняет табличные данные в виде файла CSV для дальнейшего использования.

Загрузить HTML-таблицу в виде файла CSV — TableToCSV

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

Дополнительные ресурсы:

Нужны дополнительные подключаемые модули jQuery или библиотеки JavaScript для экспорта HTML-таблиц на стороне клиента? Ознакомьтесь с разделами Экспорт таблиц jQuery и Экспорт таблиц JavaScript.

Читайте также: