0

I am trying to export HTML table to excel with applied CSS.I am using xlsx library for it, but the issue I'm facing is it ain't exporting the table with CSS styles. How do I get it to carry the CSS style, based on this thread I am applying inline CSS to the table elements.

HTML

  <table #table>
    <thead>
    <tr>
    <th>Color
    <th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of copy;index as i">
    <td [style.color]="colors[i]">
    {{item}}
    </td>
    </tr>
    </tbody>
    </table>
    <button type="button" (click)="fireEvent()">Export</button>

Component

export class AppComponent  {
  @ViewChild('table') table: ElementRef;

colors=['Red','Green','Blue','Orange','Violet'];



fireEvent()
{
  const ws: XLSX.WorkSheet=XLSX.utils.table_to_sheet(this.table.nativeElement);
  const wb: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  /* save to file */
  XLSX.writeFile(wb, 'SheetJS.xlsx');

}
}

I tried using xlsx-style library which proclaims to preserve CSS styles and tried this thread but all in vain.what could be the workaround?

DEMO

8
  • AFAIK you should use pro version of Sheet.js. Commented Nov 19, 2018 at 7:33
  • @Abhi i tried But It did not work either eventually backend team took care of it using Apache-POI if you have found the solution fork my stackblitz and share it :) Commented Nov 19, 2018 at 7:39
  • github.com/Krishnakanth94/Xlsx-styles-working-code , Check this Commented Nov 19, 2018 at 9:48
  • @Abhi Thanks I will check it out :) Commented Nov 19, 2018 at 9:52
  • @Vikas Did that help? I'm looking at the same issue right now so I'm hoping you've got yours working... Commented Mar 15, 2019 at 9:51

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.