Accounting Format Lost in `toHtml()` Export

Accounting Format Lost in `toHtml()` Export

Posted by: yyadzevich on 4 August 2025, 3:15 pm EST

• 

  yyadzevich

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 August 2025, 3:15 pm EST

  Problem Summary
  
  SpreadJS correctly displays accounting format ($ left-aligned, numbers right-aligned) in the live spreadsheet view, but

  toHtml()

  export loses this formatting and applies

  text-align: right

  to the entire string, making the dollar sign appear right-aligned instead of left-aligned.

  Expected Behavior
  
  Accounting format should maintain left-aligned dollar sign and right-aligned numbers in HTML export, matching the live view appearance.

  Actual Behavior
  
  

  toHtml()

  exports accounting cells as:

  <td style="text-align: right;">$1,234.56</td>

  This makes the entire content (including $) right-aligned, breaking the accounting format.

  Expected: HTML that preserves $ left-aligned, number right-aligned

  Question
  
  Is there a way to make

  toHtml()

  preserve proper accounting format alignment, or is this a known limitation? Any workarounds or parameters that maintain the visual formatting seen in the live view?

  Environment

  • SpreadJS version: 18
  • Browser: Chrome
  • Use case: PDF generation from exported HTML
• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 5 August 2025, 2:06 am EST

  Hi,

  Thank you for providing the details.

  This appears to be a known limitation of the toHtml() method. Although SpreadJS correctly renders the accounting format in the live view—showing the dollar sign left-aligned and the numeric value right-aligned—the toHtml() output applies a uniform text-align: right to the entire cell content. As a result, the alignment seen in the spreadsheet is not preserved in the exported HTML. I’ve raised this to the concerned team for clarification. The internal tracking ID is SJS-30984. I’ll keep you updated as soon as I receive any further information.

  Reason:

  SpreadJS uses internal canvas rendering logic to visually represent accounting formats. However, toHtml() produces static HTML/CSS, which lacks the capability to replicate dual alignment layouts—such as separating the position of currency symbols and values.

  Workarounds:

  Currently, there is no native support in toHtml() for preserving accounting alignment. That said, you could consider the following options:

  • Post-process the exported HTML

  Detect accounting cells and restructure the HTML to split the content using separate spans:

  <td>
    <span style="float: left;">$</span>
    <span style="float: right;">1,234.56</span>
  </td>

  This helps visually simulate the accounting format.

  • Use SpreadJS PDF export

  If your ultimate goal is to generate PDFs, consider using SpreadJS’s built-in PDF export:

  spread.savePDF(blob, callback, options);

  This method generally preserves the layout more accurately than the HTML export.

  Regards,
  
  Priyam

• 

  yyadzevich

  • Post Options:
  • Link
    Copy

  Posted 5 August 2025, 11:00 am EST

  Thank you for a quick response! We are already doing some post-processing after converting to HTML, e.g. adding missing indentation, word wrapping, padding cell settings and hyperlinks. We should create another workaround for ‘Accounting’ format as well then. Please keep us informed in case there are some changes to toHtml() method

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2025, 1:14 am EST

  Hi,

  Sure, I’ll keep you informed if there are any updates.

  Regards,
  
  Priyam

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 8 August 2025, 8:34 am EST

  Hi,

  The devs mentioned that this is not a supported scenario.

  The “according format” separates symbols and values based on the formatter and rendering methods, and the blank areas are influenced by the column width. However, the current

  toHTML

  implementation does not account for the formatter or rendering behavior—it only combines the CSS styles generated by the DOM elements. Therefore, this case is currently not supported.

  Regards,
  
  Priyam