Экспорт JS в Excel
Обновлено: 03.07.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.
Читайте также: