** Note: With version 2, the API of XLSX.js has been updated in ways that will break existing code. The details of these changes are outlined here. **
Hello, and welcome to our new site! We are still getting things setup, so please excuse the ongoing changes.
Today, we are going to look at creating an Excel-compatible XLSX file with XLSX.js. Since this demo/tutorial picks up where our last one (Load an Excel File with XLSX.js) left off, please be sure to read through that post – especially “The Object” section. So, with that, let’s load the fiddle (http://jsfiddle.net/innovatejs/ueETX/) and dig in.
I started this fiddle by forking the one used in our last demo, so all the references and settings should be the same. And, like the last demo, this one is targeted toward simplicity and a basic demonstration of the functionality. To that end, Data URI’s are used as the download mechanism for the base64 file created. IE does not yet support this download method for this file type. Therefore, I recommend that you view the demo in something other than IE (I tested Chrome, Firefox, and Opera, all worked fine. I think Chrome’s experience is the best, in this case). If you must view the demo in IE, I suggest changing the second to last line to “alert(xlsx(file).base64);”. That will not create a downloadable file for you, but it will give evidence of the base64 string created. There are two reasons why I did not include a more advanced download mechanism for this demo: One, Flash or Silverlight downloaders must be hosted on the same domain as the viewed page. Given that I cannot upload Flash or Silverlight to jsFiddle, that poses a problem. Two, it would add unneeded complexity to an otherwise simple demo (this is not a production page).
This demo requires quite a bit more code than the previous one, but fortunately it’s not much more complicated. Let’s start with the HTML. At the top we have a text input for the worksheet’s name, followed by a table that will represent our worksheet data. This table has four rows and four columns, each with text inputs showing default values that match our previous demo. Finally, we have a save button that will trigger the processing and download.
Finally, we point the window’s location to the href string XLSX.js generates from the file object. Calling “xlsx(file)” will return an object with four properties. “processTime” and “zipTime” represent the same information as they do when reading an XLSX file – the amount of time it took to process the data and the amount of time it took to zip the data. “base64″ is the actual base64 string generated by XLSX.js. However, it’s the “href” property that might cause the most confusion. “href” is a function that simply concatenates the base64 string with the XLSX MIME type to generate a string to which the browser can be navigated (in non-IE browsers). Our goal in creating this was to save the developer from needing to find the MIME string and do the concatenation themselves with each use. We figured that the memory benefit of not storing the string in concatenated and non-concatenated forms would outweigh the performance detriment of needing to concatenate the string with each call. Since the user should cache whichever result they prefer, if they are using it multiple times, there should not be a significant performance detriment.
So, there you have it. At the click of a button, a table of text inputs are downloaded as an Excel file – without the use of ActiveX or Excel itself. For those who wish to fiddle with the fiddle, I tried to lay out the demo in a very expandable way. For example, the loops allow for the easy addition of more rows or columns. And, these loops can be duplicated and used to create a second worksheet, with slight modification. One could even add columns, rows, or worksheets dynamically - the possibilities are endless!