html-to-xlsx recipe generates excel xslx files from html tables. This is not a full html -> excel conversion but rather pragmatic and fast way to create excel files from jsreport. Recipe will read input table and extract couple of computed style properties using a specific html engine (which defaults to chrome), and finally use the computed styles to create the excel cells.
Following css properties are supported:
background-color- cell background color
color- cell foreground color
border-left-style- as well as positions will be transformed into excel cells borders
text-align- text horizontal align in the excel cell
vertical-align- vertical align in the excel cell
width- the excel column will get the highest width, it can be little bit inaccurate because of pixel to excel points conversion
height- the excel row will get the highest height
font-size- font size
colspan- numeric value that merges current column with columns to the right
rowspan- numeric value that merges current row with rows below.
overflow- the excel cell will have text wrap enabled if this is set to scoll.
- htmlEngine (supported values here will depend on the html engines that you have available in your jsreport installation, by default just
chromeis available but you can additionally install phantom extension and get
phantomas a html engine too)
Issues with row height being more larger than actual content
When using phantomjs as engine there are cases when a row height ends with a bigger height than the actual content, this is caused by a phantomjs bug that retrieves bigger height when the content of cells have white space characters.
There are two possible workarounds if this bigger height of row is problematic for your excel file:
"letter-spacing"css property with some negative value (demo)
<!-- without "letter-spacing" row would be more larger --> <table style="letter-spacing: -4px"> <tr> <td> From Date: NA</td> <td> To Date: NA </td> <td> Search Text: NA </td> <td> Sort Order: NA </td> <td> Sort Key: NA </td> <td> Filter: NA </td> </tr> </table>
"line-height: 0"with a specific
<!-- without "line-height" and "height" row would be more larger --> <table style="line-height: 0"> <tr style="height: 20px"> <td> From Date: NA</td> <td> To Date: NA </td> <td> Search Text: NA </td> <td> Sort Order: NA </td> <td> Sort Key: NA </td> <td> Filter: NA </td> </tr> </table>