просмотр кода страницы https console excel file javascript
Открываем файлы формата Open XML Excel в JavaScript
Для загрузки информации о торговых точках в наш логистический SaaS-сервис «Муравьиная логистика» из Excel я решил использовать web-браузер. Обычно проще загрузить файл на сервер и с помощью любой библиотеки залить в БД. Но мне было интересно загрузить его построчно для контроля целостности каждой строки на клиенте, ну и, конечно, опробовать так всеми рекламируемое HTML5 FileAPI и Drag and Drop.
Книга Exсel – это ZIP архив с каталогами и файлами XML в формате Open XML. Парсить XML отлично умеет jQuery, а вот зиппить нет. Для этого на просторах сети была найдена библиотека zip.js, которая прекрасно справилась с поставленной задачей.
Итак, попробуем посмотреть, что же находится внутри архива:
Результат можно посмотреть тут. Скачайте пример файла и перетащите его на форму.
В консоли появится список всех файлов архива книги Excel. Среди свойств объектов, появившихся в консоли, есть filename, по нему-то мы и будем искать необходимые нам файлы XML.
Отфильтруем только нужные для нас файлы:
Результат можно посмотреть тут, закинув файл и посмотрев в консоль.
Далее нам необходимо извлечь данные простыми селекторами, для словаря строк это — st t, для записей таблицы с данными на листе это — sheetdata row.
Добавим функцию для вывода данных из листа Excel:
Так как Chrome считает преступлением использование HTML File API в кросс-домене (Uncaught SecurityError: An attempt was made to break through the security policy of the user agent.), последний пример выложил на Web-сервер.
Перетаскиваем файл и получаем стандартную таблицу HTML.
Как прочитать содержимое файла Excel на стороне клиента?
На странице JSP мне нужно просмотреть файл Excel, и после выбора файла в системе мне нужно прочитать содержимое этого файла Excel и заполнить форму.
В настоящее время я пробовал с приведенным ниже кодом, но он работает только в IE с некоторыми изменениями в Internet Explorer для ActiveXObject. Это не работает в остальных браузерах.
Пожалуйста, предложите какое-нибудь решение, чтобы оно работало во всех браузерах.
5 ответов
Как правило, невозможно прочитать / записать любой файл через JavaScript в браузере. Поэтому без каких-либо дополнительных плагинов вы не сможете читать / записывать файлы Excel из браузера. ActiveX объекты Excel позволяют вам делать это, но только IE поддерживает объекты ActiveX.
Могут быть другие плагины для других браузеров, но я не знаю ни одного.
Во-первых, почему вы хотите это сделать? Можете ли вы привести пример использования? Возможно, есть лучшие варианты, чем то, что вы пытаетесь.
ОБНОВЛЕНИЕ
Вам нужно будет передать файл Excel на сервер и выполнить чтение файла Excel на стороне сервера (например, в сервлете).
Вам нужно будет использовать в JSP в многочастной форме
На стороне сервера вы можете использовать загрузку файлов Apache Commons.
Когда у вас есть файл (или поток), вы можете проанализировать его, например, с помощью Apache POI HSSF / XSSF, а затем обновите данные в базе данных или передайте их обратно в JSP
Этот работает во всех основных браузерах.
( 1 ) вот полезный макрос кнопки, который я вставил в свои файлы Excel, что позволяет безболезненно сохранять его в формате XML (и повторно сохранять в формате xls):
( 2 ) Анализ JS более сложен, но предпосылка проста. Будут объекты XML, такие как «Рабочий лист», «Таблица», «Строка», «Ячейка» и «Данные». Есть также атрибут XML с именем ss: Index, который иногда мне кажется полезным.
Вы можете загрузить и открыть файл клиентской части в большинстве современных браузеров, используя Файловый API HTML5
После загрузки файла вы можете проанализировать содержимое с помощью библиотеки, которая поддерживает определенные выходные форматы Excel (например, csv / xlsx).
How can I read an Excel File with JavaScript (without ActiveXObject)
My friend asked me to make for a simple application to generate charts (bar, curves) from an Excel file. I opted to use JavaScript as a language since I know already the powerful chart.js. However before using chart.js, I have to gather data from the Excel file. So how to read an Excel file via JavaScript?
After some research I have managed to do this with Internet Explorer with (using ActiveX), but I need it to work across browsers.
4 Answers 4
There are JavaScript libraries which allow XLS & XLSX to be parsed in pure JavaScript. I tested with Chrome (albeit on Windows) and it worked fine.
Here is another perspective on this problem, instead of reading an Excel file with JavaScript, you could directly use JavaScript in Excel with the help of the Funfun Excel add-in. Basically, Funfun is a tool that allows you to use JavaScript in Excel so you could use libraries like Chart.js to plot chart from the data in the spreadsheet.
Basically, what you need to do is
1). Insert the Funfun add-in from Office Add-ins store
2). Create a new Funfun or load a sample from Funfun online editor
3). Write JavaScrip code as you do in any other JavaScript editor. In this step, in order to directly use the data from the spreadsheet, you need to write some JSON I/O to make Excel cell reference. The place this value is in Setting-short But this would be just several lines. For example, let’s assume we have some data like below in the spreadsheet. The Average hours is in cell A1.
In this case, the JSON I/O value would be:
You could check the Funfun documentation for more explanation.
4). Run the code to plot chart
Here is a sample chart that I made using JavaScript(Chart.js) and Excel data on Funfun online editor. You could check it on the link below. You could also easily load it to your Excel as described in Step2.
Disclosure: I’m a developer from Funfun.
How to read an excel file contents on client side?
From the JSP page, I need to browse excel file and after selecting file on system, I need to read that excel file contents and fill my form.
Currently I have tried with below code but its only working in IE with some changes in IE internet options for ActiveXObject. Its not working in rest of the browsers.
Please suggest some solution so that it works in all browsers.
5 Answers 5
An xlsx spreadsheet is a zip file with a bunch of xml files in it. Using something like zip.js, you can extract the xml files and parse them in the browser. xlsx.js does this. Here’s my simple example. Copied here for convenience:
You can load and open the file client side in most modern browsers using the HTML5 File API
Once you have loaded the file you can parse the contents with a library that supports certain excel output formats (such as csv / xlsx).
Here are a couple of options.
It is generally not possible to read/write any file via JavaScript in a browser. So without any additional plug-ins you will not be able to read/write Excel files from the browser. The ActiveX objects of Excel let you do this, but only IE supports ActiveX objects.
There may be other plugins for other browsers, but i am aware of none.
In the first place, why do you want to do that? Can you give a use case? Perhaps there are better options available than what you are trying.
UPDATE
You will have to pass the excel file to the server and do the reading of the excel in the server side (in a servlet for instance).
You will have to use a in the JSP within a multipart form
Работа с книгами с использованием API JavaScript для Excel
В этой статье приведены примеры кода, в которых показано, как выполнять стандартные задачи для книг с использованием API JavaScript для Excel. Полный список свойств и методов, поддерживаемых объектом, см. в книге Workbook Объект (API JavaScript для Excel). В этой статье также рассматриваются действия на уровне книги, выполняемые с помощью объекта Application.
Объект Workbook — это точка входа для вашей надстройки для взаимодействия с Excel. Он поддерживает коллекции листов, таблиц, сводных таблиц и других элементов, через которые выполняется доступ и изменение данных Excel. Объект WorksheetCollection предоставляет надстройке доступ ко всем данным книги с помощью отдельных листов. В частности, он позволяет надстройке добавлять листы, перемещаться между ними и назначать обработчиков событий листа. В статье Работа с листами с использованием API JavaScript для Excel описывается способ доступа к листам и их изменение.
Получение активной ячейки или выделенного диапазона
Создание книги
С помощью метода createWorkbook также можно создать копию существующей книги. Метод принимает в качестве необязательного параметра строковое представление XLSX-файла в кодировке base64. Полученная книга будет копией этого файла, предполагая, что строковый аргумент является допустимым XLSX-файлом.
Текущую книгу надстройки можно получить в качестве строки с кодом base64 с помощью нарезки файлов. Преобразование файла в нужную строку в кодировке base64 можно выполнить с помощью класса FileReader, как показано в приведенном ниже примере.
Вставка копии существующей книги в текущую книгу.
В предыдущем примере показана новая книга, которая была создана из существующей книги. Вы также можете скопировать отдельные части или всю существующую книгу целиком в книгу, привязанную в настоящее время к вашей надстройке. В книге используется метод вставки копий таблиц целевой книги insertWorksheetsFromBase64 в себя. Файл другой книги передается как строка с кодом base64, как и Excel.createWorkbook вызов.
Метод insertWorksheetsFromBase64 поддерживается для Excel на Windows, Mac и в Интернете. Он не поддерживается для iOS. Кроме того, Excel в Интернете этот метод не поддерживает исходные таблицы с элементами PivotTable, Chart, Comment или Slicer. Если эти объекты присутствуют, метод возвращает insertWorksheetsFromBase64 UnsupportedFeature ошибку в Excel в Интернете.
В следующем примере кода показано, как вставить в текущую книгу таблицы из другой книги. Этот пример кода сначала обрабатывает файл книги с объектом и извлекает строку с кодом base64, а затем вставляет эту строку с кодом base64 в текущую FileReader книгу. Новые листы вставляются после листа с именем Sheet1. Обратите внимание, что он передается в качестве параметра свойства [] InsertWorksheetOptions.sheetNamesToInsert. Это означает, что все таблицы из целевой книги вставляются в текущую книгу.
Защита структуры книги
Метод protect принимает необязательный строковый параметр. Эта строка представляет пароль, необходимый пользователю для обхода защиты и изменения структуры книги.
Защиту также можно установить на уровне книги, чтобы предотвратить нежелательные изменения данных. Дополнительные сведения см. в разделе Защита данных статьи Работа с листами с использованием API JavaScript для Excel.
Дополнительные сведения о защите книги в Excel см. в статье Защита книги.
Доступ к свойствам документов
Объекты Workbook имеют доступ к метаданным файлов Office, называемым свойствами документов. Свойство properties объекта Workbook является объектом DocumentProperties, содержащим эти значения метаданных. В следующем примере показано, как установить author свойство.
Настраиваемые свойства
Настраиваемые свойства на уровне таблицы
Настраиваемые свойства также можно установить на уровне таблицы. Они похожи на настраиваемые свойства на уровне документов, за исключением того, что один и тот же ключ может повторяться в разных таблицах. В следующем примере показано, как создать настраиваемую свойство WorksheetGroup со значением «Альфа» на текущем таблице, а затем получить его.
Доступ к параметрам документа
Параметры книги похожи на коллекцию настраиваемых свойств. Различие заключается в том, что параметры уникальны для одного файла Excel и соединения надстройки, а свойства связаны только с файлом. В приведенном ниже примере показано, как создать параметр и получить к нему доступ.
Доступ к настройкам культуры приложений
В книге есть языковые и культурные параметры, влияющие на отображение определенных данных. Эти параметры могут помочь локализовать данные, когда пользователи надстройки делятся книгами на разных языках и культурах. Ваша надстройка может использовать анализ строк для локализации формата чисел, дат и времени в зависимости от параметров культуры системы, чтобы каждый пользователь видел данные в формате своей культуры.
Application.cultureInfo определяет параметры культуры системы как объект CultureInfo. Это содержит параметры, такие как числовой десятичной сепаратор или формат даты.
В следующем примере изменяется десятичное сепараторное течение числовой строки с «,» на символ, используемый в параметрах системы.
Добавление настраиваемых XML-данных в книгу
Формат файла Excel Open XML (XLSX) позволяет надстройке внедрить настраиваемые XML-данные в книгу. Эти данные сохраняются с книгой независимо от надстройки.
Книга содержит объект CustomXmlPartCollection, являющийся списком объектов CustomXmlParts. Они предоставляют доступ к строкам XML и соответствующему уникальному идентификатору. Сохраняя эти идентификаторы как параметры, надстройка может сохранять ключи к частям XML между сеансами.
В приведенных ниже примерах показано, как использовать настраиваемые части XML. В первом блоке кода показано, как внедрять XML-данные в документ. Выполняется сохранение списка проверяющих, а затем используются параметры книги, чтобы сохранить параметр id XML для будущих извлечений. Во втором блоке показано, как получить доступ к этим XML-данным позднее. Параметр «ContosoReviewXmlPartId» загружается и передается объекту customXmlParts книги. Данные XML затем печатаются в консоль.
Управление режимом вычислений
Установка режима вычислений
Установка типа вычислений
Временная приостановка вычисления
Обнаружение активации книг
Ваша надстройка может обнаруживать при активации книги. Книга становится неактивной, когда пользователь переключает фокус на другую книгу, на другое приложение или (в Excel в Интернете) на другую вкладку веб-браузера. Книга активируется, когда пользователь возвращает фокус в книгу. Активация книги может вызвать функции вызова в надстройке, например освежающие данные книги.
Чтобы определить, когда книга активирована, зарегистрируйте обработник событий для события onActivated книги. Обработчики событий onActivated для события получают объект WorkbookActivatedEventArgs при пожаре события.
Событие onActivated не определяет, когда книга открывается. Это событие обнаруживает только тогда, когда пользователь переключается на уже открытую книгу.
В следующем примере кода показано, как зарегистрировать обработник событий onActivated и настроить функцию вызова.
Сохраните книгу.
Workbook.save сохраняет книгу в постоянное хранилище. Метод save принимает один необязательный saveBehavior параметр, который может быть одним из следующих значений.
Если пользователь при запрос на сохранение отменяет операцию, save выдает исключение.