Innovative JavaScript Solutions

Introducing XLSX.js

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

It’s amazing, isn’t it? For years JavaScript was just a small scripting language of relatively little consequence. Now, in symbiosis with HTML and CSS, it is evolving into a first class development platform. It’s still short of that, to be sure, but I have little doubt as to the destination. Now we see JavaScript playing a role in server-side scripting, 3D gaming, and content rendering, but the future will hold much more for the little language that could. Rendering libraries such as PDF.js, JSMad, and Broadway are likely to be precursors to the emergence of JavaScript content generation. We already see a few indications of this, but today we’re looking to strengthen this trend.

XLSX.js

XLSX.js is a library that converts base64 strings into object representations of XLSX spreadsheets, and vice versa. Now, some of you may be thinking, “I get the object representation of an XLSX spreadsheet part, I like that, but what good is a base64 string?” Well, actually, there are a lot of things you can do with base64 strings. Though sometimes a conversion from binary is required, you can obtain them from XHRs, FileReader, or Silverlight/Flash uploaders. And, similarly, you can send them to web services, FileWriter, Data URIs, or Sliverlight/Flash downloaders. In other words, this library will allow you to read and write Excel-compatible XLSX files when paired with an appropriate file access mechanism.

Why?

Current solutions for reading or writing XLSX data take one of two approaches; use ActiveX to communicate with Excel or send your data to a server for conversion. A number of the applications we had written required the ability to read and write Excel files, so we explored both options and found a number of concerns with each.

ActiveX

This may work in some situations, but there are a number of concerns with this method:

  • One, ActiveX is only supported on Windows, using Internet Explorer. Still, even if that perfectly describes your audience, it looks as though ActiveX may be playing a diminished role in the future. Only the desktop version of Internet Explorer 10 supports ActiveX, it is not supported in the Modern UI, Windows Phone, or Xbox versions. Now, you may not need support for the Modern UI version or Windows Phone. And, I am sure there is no demand to generate XLSX files on the Xbox. However, I do think it is wise to pursue methods that are standards compliant and cross-browser compatible. Nobody knows what the future holds.
  • Two, using the Excel ActiveX control requires that 100% of your audience has Excel installed. In some scenarios, that is not the case.
  • Three, the user must change Internet Explorer’s security settings in order to allow JavaScript access to the Excel ActiveX control. It is restricted by default, and with good reason. Once the control has been loaded, I do not know of any checks on what the script can do (within the context of Excel). That may be acceptable in certain intranet zone or trusted sites zone scenarios, but that would never be an acceptable change to the internet zone. Still, even if your circumstance allows the user to change their settings, it still impacts user experience and often requires training and/or setup time.
  • Four, interacting with the ActiveX control is rather awkward. Most of the documentation and examples are for other programming languages, and it is not very efficient.

Server-side

The biggest potential concerns with this solution, that I can think of, are whether you have the ability to run server-side code and whether it makes sense to run server-side code. The answers to both questions may seem to be foregone conclusions… but maybe they aren’t. What about web applications hosted in SharePoint Online? SPO doesn’t allow you to run custom server-side code. What about Modern UI applications written in HTML5, CSS3, and JavaScript? Do you want to run a server just to generate content, when the rest of the application is local? What about HTML5 mobile applications? I would theorize that scenarios without the ability to run server-side code may become more common, at least for a while, rather than less. If you have the ability, there might still be some cases where you would want client-side generation, but I doubt many would prefer that idea at this point. However, if you don’t have the ability, there are no alternatives beside the ActiveX solution discussed above.

Our situations prevented the use of server-side code, so we were left with ActiveX. ActiveX, with the limitations described above, left us wanting more. Hence, we created XLSX.js!

How?

OK, so, how does it work? Well, let’s start with a little information about XLSX files. As opposed to Excel’s previous format, XLSX is XML based. However, an XLSX file isn’t just one big XML document. It is a ZIP file composed of numerous XML files in a particular (folder) structure. Therefore, in order to interact with these XML files (either through string manipulation or DOMParser) we need to unzip the archive. XLSX.js leverages JSZip to unzip the file, and then it reads and correlates the data in the XML documents to generate an object representation of the XLSX file. For writing the file, it does all of that in reverse.

What About…

  • JSZip: Yes, you will need JSZip in order for XLSX.js to work properly. XLSX.js does not come with, and will not be distributed with, JSZip. You will need to download the appropriate files, attach them to your project, and ensure you are in compliance with JSZip’s license by yourself.
  • Features: Right now XLSX.js supports reading data from multiple worksheets, the names of the worksheets, the active worksheet, and file metadata. It does not support the reading of formatting information, macros, charts, or anything else. It also supports writing simple data to multiple worksheets, setting the names of the worksheets, setting the active worksheet, and setting file metadata. It also supports the ability to turn the data on a worksheet into a sortable table. It does not support the writing of formatting information, macros, charts, or anything else. However, this need not (and hopefully will not) be the case forever. Our situation did not require the development of any features beyond what you see listed above. As time goes on we may add features as we need them for other projects, or as we have free time. But, that doesn’t prevent the community from expanding and refining the feature set! Every feature should be possible, should you wish to add it.
  • Support: No, we will not be providing official support at this time. We will try to answer your questions as we have time, and help as much as possible, but we are not currently in the position to guarantee any support, fixes, or updates.
  • Demos & Documentation: Our first demo, located here, covers basic load functionality. Our second demo, located here, builds on these concepts to look at basic save functionality. For further demos and tutorials, please check back often!
  • Word, PowerPoint, etc: Stay tuned…
  • Licensing:  XLSX.js has been released by Microsoft under the Microsoft Office Extensible File License. The text of this license can be found on GitHub, along with XLSX.js itself. The Microsoft Office Extensible File License is an open source license, but it is not OSI approved. This license has similarities to the MS-PL, but there are significant differences. Please read the Microsoft Office Extensible File License carefully before using XLSX.js

So, with that I give you XLSX.js! The source can be found on GitHub, located here:

https://github.com/stephen-hardy/xlsx.js

Enjoy!
Stephen

Advertisements

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

%d bloggers like this: