I'm currently creating generic spreadsheets in JS using . This works fine to generate just a generic spreadsheet to display my data. However, I wanna add a few features.

.jpg is an example of what I want to achieve. It was created using Apache POI, which is only available for Java.

The features I want in that screenshot are

1. The ability to add a picture (seen as a logo in the top-left)
2. Ability to change font-color (as seen in the Title in the center)
3. Ability to center-align text (as seen with the SubTitles in the center)
4. Ability to make fields sortable (As seen with the arrow buttons per each column)

Seems like SheetJS can provide some of this functionality through their premium version. is a list of other libraries I looked into. However, that list seems more of emulating a spreadsheet with native JS objects as opposed to creating an .xlsx file. Also, most of them require paid licenses.

Anybody have experience with creating my 4 requirements with a free JS solution? I'm building on Meteor JS btw.

If not, are there any other workarounds to achieving this? I.e. Having the app just output a .csv, but then creating a generic excel "template" file which will do all the formatting with the csv? Or, delegating to some other program/script to generate the XLSX and downloading the output file.

Thanks

I'm currently creating generic spreadsheets in JS using https://www.npmjs.com/package/xlsx . This works fine to generate just a generic spreadsheet to display my data. However, I wanna add a few features.

https://i.sstatic.net/3qBc7.jpg is an example of what I want to achieve. It was created using Apache POI, which is only available for Java.

The features I want in that screenshot are

1. The ability to add a picture (seen as a logo in the top-left)
2. Ability to change font-color (as seen in the Title in the center)
3. Ability to center-align text (as seen with the SubTitles in the center)
4. Ability to make fields sortable (As seen with the arrow buttons per each column)

Seems like SheetJS can provide some of this functionality through their premium version. https://dzone.com/articles/5-popular-standalone-javascript-spreadhsheet-libra is a list of other libraries I looked into. However, that list seems more of emulating a spreadsheet with native JS objects as opposed to creating an .xlsx file. Also, most of them require paid licenses.

Anybody have experience with creating my 4 requirements with a free JS solution? I'm building on Meteor JS btw.

If not, are there any other workarounds to achieving this? I.e. Having the app just output a .csv, but then creating a generic excel "template" file which will do all the formatting with the csv? Or, delegating to some other program/script to generate the XLSX and downloading the output file.

Thanks

• javascript
• excel
• meteor
• xlsx
• sheetjs

3 Answers 3

exceljs got all the features you want, it's just got a slightly different API and not as popular as xlsx that's why it always flies under the radar.

Use XLSX library, it support all features that you need.

I created a library for that purpose! It is Mitosis Excel Templater.

It is a templater engine to create Excel files, inspiring from {Mustache} syntax. It enables to generate complex formatted Excel files without code, just by feeding an Excel template and data to it. It is a npm package for node or browser.

Use Excel to create a template with the formatting and formulae you want and insert placeholders where your data must be mapped.

• {tagName} is a simple placeholder. It will be replaced by the value mapping to tagName.
• {=tagName} is a numeric placeholder. It will enforce the type of the value under tagName to be numeric.
• {?tagName} is a conditional placeholder. It will display the line where it stands only if it is truthy. (Note that the placeholder gets removed, it is not replaced by its value.)
• {#tagName} and {/tagName} are contextual and iterative placeholders.
  • If the value under tagName is an object, the placeholders within the lines between both bounds will refer to the fields of this object.
  • If the value under tagName is an array of objects, the section between both bounds will be repeated for each element of the array, with the placeholders referring to the fields of the current iteration's object.

Example:

Excel Template:

  |     A     |     B      |      C     |
1 | {name}    | {surName}  |            |
2 | Job: {job}             | {?job}     |
3 | Sport: {sport}         | {?sport}   |
4 | Cars of {name} {surName}:           |
5 | > {brand} | {model}    | {#carList} |
6 |   {color} | {=year}    | {/carList} |
7 |           |            |            |
8 | Oldest car's year:     | =MIN(B6)   |

Data:

{
 "name": "Louis",
 "surName": "Durand",
 "job": "Software Engineer",
 "carList": [
   { "model": "C4", "color": "Blue", "brand": "Citroën", "year": "2011" },
   { "model": "3008", "color": "Brown", "brand": "Peugeot", "year": 2012 }
 ]
}

Result:

  |     A     |    B    |     C    |
1 | Louis     | Durand  |          |
2 | Job: Software Engineer         |
3 | Cars of Louis Durand:          |
4 | > Citroën | C4      |          |
5 |   Blue    |    2011 |          |
6 | > Peugeot | 3008    |          |
7 |   Brown   |    2012 |          |
8 |           |         |          |
9 | Oldest car's year:  | 2011*    |   *result of formula: =MIN(B5,B7)