Processing Excel XLSX files on browser client-side with Angular

Every programmer working on data-driven applications finds themselves in this situation eventually – upload and process an XLSX Excel file. You have plethora of frameworks and libraries to handle Excel XLSX files on the server side, be it in C# or Java. But with the world moving towards Single Page Application frameworks like Angular and React, we developers face a catch 22 – handle XLSX file uploads on the server side or the client side? What is better? Having gone through this very recently, read on for my notes on this subject.

How the heck on the browser client-side?

There is one framework in particular to the rescue – SheetJS/js-xlsx – this gets you exactly what you need in a nifty little package. The browser support is fantastic with every modern web browser supporting it – yes even the mobile ones! Check out the browser support matrix –

Browser support matrix

For the Javascript world, my usual saying is “If the dang thing works on IE9, you call it a good night…” and that belief hasn’t failed me in years.

And Server Side?

While explaining how to do this on C# or Java would be a drag, there are countless ways to do this and the web is full of it. Just look it up. What you want to do here though is probably use Node. Guess what? The same js-xlsx module works on NodeJS too and practically with exactly the same code. The major difference being in how you access the raw file ArrayBuffer. Read their server side demo code and you will see how straightforward it is – js-xlsx Server Side

Where do you handle it then? Browser or the Server?

This is the trick question, the answer to which always starts with – “It depends”. Yes it really depends on a few factors. The first one is – how heavy is your Excel file? Does it run into the hundreds of thousands of rows or more? Stick with Server Side. Handling files that large would definitely suck up the memory on most browsers and make your app prone to crashes. In my experience so far, files with under 10,000 rows are good for being processed on the browser client side on most machines (even the ones with as low as 2 gigs of RAM).

OK why even bother with Browser side then?

Speed. No really, speed. Picking an XLSX file on the FileChooser and having it rendered as an editable table literally takes just milliseconds. Your users could be selecting an XLSX file, editing or viewing the contents, and being on their way in a fraction of the time it would take for the file to be uploaded and processed on the server and then brought back to the client side for review or editing. It really boils down to user experience. As long as you manage processing the XLSX files on the browser side without crashing it, you will be making the users life so much simpler and you should definitely prefer handling the Workbooks on the client side. Heavy transactional or big data should without a second thought be handled on the server side.

Conclusion

I hope this short write up helps you decide on what direction to take while making a decision on processing XLSX workbooks. I hope you also find the referenced js-xlsx library handy and use it handle workbooks in Javascript code (whether on the server or the client side).

Leave a Reply

Your email address will not be published. Required fields are marked *