Innovative JavaScript Solutions

We’ve moved! You can see this post on the new site by clicking here.

It’s only the second day since XLSX.js was published, and we are thrilled and humbled by the response thus far! Thank you! In this post, we’re going to look at a very basic demonstration (located here: http://jsfiddle.net/innovatejs/a2RP3/) of how XLSX.js can be used to read data from an XLSX file.

The Setup

This demo is in the form of a fiddle (jsFiddle), and references JavaScript files for XLSX.js and jsZip hosted at yourjavascript.com. I’ve never used (or heard of) yourjavascript.com before, but it seems to work well. There are limitations in using GitHub’s “raw” versions of a JavaScript file, innovateJS does not yet have a full site, and JavaScript files can’t be hosted from WordPress. So, if those files are failing to load for you, please let us know and we will find another option.

To make this demo as basic as possible, I’ve embedded the file we’ll be reading into the fiddle as a base64 string. To do this, I created the spreadsheet, converted it into a base64 string using an online utility, and then pasted that string into the fiddle. However, as I mentioned in XLSX.js’s introduction post, there are multiple ways to obtain a base64 string of a particular file. There is nothing special about this file. Anyone could create it using Excel or any other product that supports XLSX. If you’d like, you can download the file here.

The Code

As you can see, there really isn’t much code to this demo – except for the embedded file. In fact, it could easily be condensed into one line, “$(‘#output’).text(JSON.stringify(xlsx(file)));”, located after the embedded file. However, for the sake of readability and tinker-ability, I put the code at the top and broke out the xlsx object into it’s own variable.

Reading an XLSX file with XLSX.js is very simple; call one function with one argument. XLSX.js takes care of the rest! This demo stringifies the object returned by the xlsx function, and then displays the string in the output div. The more complicated part comes in understanding the object representation of the XLSX file, and we’ll discuss that in the next section.

The Object

The data read or written by the current version of XLSX.js can be grouped into two main categories: metadata and worksheet data. The metadata is stored as a property of the object itself. For example, the “creator” field (Windows references it as “Authors” in the properties dialog) can be found at obj.creator. Similarly, we see fields for “created”, “lastModifiedBy”, and “modified”. In addition to the metadata, we also see “activeWorksheet”, “processTime”, and “zipTime”. These fields are not truly metadata, but they are similar in that they are a property of the loaded object as a whole. One XLSX file can only have one active worksheet, and it can only have taken one amount of time to process or unzip for a particular instance, just like it can only have one “created” time stamp. Therefore, in that context, these three fields are treated as metadata and stored in a similar fashion.

So, that just leaves the worksheet data. The object’s worksheet property is an array of the spreadsheet’s worksheets. Each worksheet is an array of rows in that worksheet, but the array also has a “name” property to specify the name of the worksheet. Finally, each row is an array of cell values in that row, from left to right.

The Rest

In the near future, we hope to release further demonstrations that illuminate how this basic load functionality can be expanded into a powerful user experience. However, this demo did allow us to look at one of the two fundamental functionalities of the library in a simple manner and to gain familiarity with the object representation of an XLSX file. The later will be essential for our next demo, which is basic file creation.

Stephen

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: