DEV Community

loading...
Cover image for How to convert Excel to HTML and JSON and vice versa

How to convert Excel to HTML and JSON and vice versa

plazarev profile image Pavel Lazarev Originally published at dhtmlx.com Updated on ・3 min read

No doubt, Excel is the most popular tool for data processing starting from simple Excel tables with prices and products to complex financial data. With the rapidly developing world wide web, the need to display data from Excel files on websites and web apps arouse. How to efficiently convert Excel into web-based formats?

DHTMLX development team created three open source tools, which convert Excel data into the JSON format (and vice versa) and generate HTML tables from Excel files.

Based on WebAssembly and Rust

All three libraries were developed using the WebAssembly standard and Rust programming language. These technologies contribute to highly reliable code and fast performance. There are no vulnerabilities in the process of conversion, and you don’t have to worry about the safety of your data while it’s being processed. The small size of code allows you to perform the operations extremely quickly. Thus, you can use our open-source tools in your projects to maintain high-speed and secure websites and web apps.

Turning your Excel data into JSON and back

The first two open-source libraries enable you to transform the data kept in your Excel files into the JSON format and back from JSON to Excel. You can find a detailed description and instructions on GitHub:

You can install the libraries in two ways: via npm or cdn. After the data conversion, you’ll have both data and styles saved in Excel or JSON.

One of the most common use cases, when you might need to convert Excel into JSON and vice versa, is embedding your Excel sheets into a web-based spreadsheet. For example, our JavaScript spreadsheet makes use of the Excel2Json and Json2Excel libraries to provide end users with the ability to import and export Excel files. The spreadsheet has a set of features for further styling and formatting data to achieve the desired appearance.

Displaying Excel data as HTML tables

The third open-source tool Excel2Table was built on the basis of the Excel2Json library, which parses Excel files. The data is rendered as an HTML table preserving all the styles from Excel sheets.

Using the Excel2Table is very straightforward and simple:

1) The first step is to run the following command line to install the library:

npm i excel2table
Enter fullscreen mode Exit fullscreen mode

2) Then import the library into your project:

import "excel2table";
Enter fullscreen mode Exit fullscreen mode

3) And all that is left is to call the render function:

excel2table.render(html_container, data, config);
Enter fullscreen mode Exit fullscreen mode

You can find all the parameters of this function and other technical details described in our GitHub repository.

As a result, you’ll have a precise HTML version of your Excel sheet:

HTML Table from Excel File

All three libraries are distributed under the MIT license, which allows for using them both in non-commercial and commercial projects.

About DHTMLX

DHTMLX team specializes in the development of JavaScript libraries for enterprise web apps with a strong focus on project management and JS Gantt chart as the leading PM solution. In 2019 we also launched the Suite UI widget library with data processing and visualization widgets compatible with React, Angular, and Vue.js.

Originally published at https://dhtmlx.com/blog/convert-excel-file-html-json-dhtmlx-open-source-tools/

Discussion (0)

pic
Editor guide