title: export html table to excel with css in angular
body: <p>I am trying to export HTML table to excel with applied CSS.I am using <a href="https://www.npmjs.com/package/xlsx" rel="nofollow noreferrer">xlsx</a> 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 <a href="https://stackoverflow.com/questions/6909778/export-html-table-to-excel-and-keep-css-styles">thread</a> I am applying inline CSS to the table elements.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;table #table&gt;
      &lt;thead&gt;
      &lt;tr&gt;
      &lt;th&gt;Color
      &lt;th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr *ngFor="let item of copy;index as i"&gt;
      &lt;td [style.color]="colors[i]"&gt;
      {{item}}
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button type="button" (click)="fireEvent()"&gt;Export&lt;/button&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>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');
  
  }
  }
  </code></pre>
  
  <p>I tried using <a href="https://www.npmjs.com/package/xlsx-style" rel="nofollow noreferrer">xlsx-style</a> library which proclaims to preserve CSS styles and tried this <a href="https://stackoverflow.com/questions/18467418/retain-html-table-styling-after-exporting-to-excel-using-javascript-jquery">thread</a> but all in vain.what could be the workaround?</p>
  
  <p><strong><a href="https://stackblitz.com/edit/angular-6q9cbw" rel="nofollow noreferrer">DEMO</a></strong></p>