Crayon Bits Blog

User Experience, Frontend, Code and Life

Day 15 - Client side Export to Excel in JavaScript

code UserBit entrepreneurship

As any frontend developer would know, when it comes to creating files (images/pdf/excel etc) client side, water gets really murky. I went through a variety of libraries before getting to my desired implementation. This was somewhat painful.

exceljs

I first looked into exceljs. With over 3k stars on github this is a pretty popular library to generate excel with node. Upon reading the documentation and going through issues I realized that it is really meant as a server side node library.

I thought about creating a cloud function to generate the file serverside but ended up rejecting the idea. All the data I need in the file is already on the client. I wanted to take advantage of that and there must be a library that can create the file client side? I also recall having done this in the past so I had to move on with my search.

SheetJS - js-xlsx

I remembered that I had used js-xlsx in the past to generate excel files client side. So I decided to give this library a try. It has a decent learning curve so took me about 4-5 hours to get a proper excel file export feature implemented. I had left the easy bit (styling) for the end, taking that for granted - big mistake.

js-xlsx’s styling capabilities are hidden behind a paywall. Needless to say I was pretty disappointed. Should I just email the creators and pay? But my styling needs were very simplistic I didn’t want to pay just to make some text bold. On the other hand, I didn’t want to waste the amount of effort I had already invested. Decisions Decisions!

xlsx-populate - the savior

I decided to give xlsx-populate a shot based on a few recommendation on forums. Since I had already done the work of fetching the data and formatting it the right way, it made the switch simply a function of me understanding the library.

I would recommend xlsx-populate without hesitation. The d3 like syntax is an absolute pleasure to work with. It also supports proper styling and formatting to get the look and feel you want.

Thank you Dave for helping make UserBit better.

Progress

  • I need to polish the sidebar a bit
  • Project summary needs to be populated
  • Ability to assign colors to users/stakeholders
  • figure out how to do stakeholder findings
  • Offline capable
  • add description to sitemap nodes
  • Need to add several hooks for synthesis events
  • Export for question & answers
  • Export Synthesis?
  • Security rules
  • Export for sitemaps
  • Landing page
  • Beta terms

Traction

  • Contact Dean - No Response
  • Contact Terran
  • Contact Rebecca round 2
  • Interview Terran
  • Interview Juliana (scheduled for Friday)
  • Get Rebecca on-boarded (scheduled for Sunday)
« Previous
Next »