Angular2/Javascript table export to Excel

Question

Hi guys we seem to have trouble with the format of the exported excel file here is our code:

import { Component,ViewContainerRef } from '@angular/core';

@Component({
selector: 'my-app',
template: `<input type="button" (click)="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel">
            <table id="testTable" rules="groups" frame="hsides" border="2">
            <tr>
                <th>111111</th>
                <th>222222</th>
            </tr>
            <tr>
                <td>333334</td>
                <td>444443x</td>
            </tr>
            </table>
             `
})

export class AppComponent{

    tableToExcel(table, name){
    let uri = 'data:application/vnd.ms-excel;base64,'
        , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
        , base64 = function(s) { return window.btoa(decodeURI(encodeURIComponent(s))) }
        , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
            window.location.href = uri + base64(format(template, ctx))
        }
    }

Here is the screenshot of the output:

as you can see there certain html elements included in the parsing, how do I format it correctly?

Have you got the solution?

Sakkeer A
– Sakkeer A

2018-12-04 04:47:43 +00:00
Commented Dec 4, 2018 at 4:47 — Sakkeer A
– Sakkeer A, Commented Dec 4, 2018 at 4:47

user3797088 · Accepted Answer · 2016-10-13 05:33:10Z

1

We figured it out might as well answer this if someone needs a reference we just changed the "decodeURI" to "decodeURIComponent" and the format turned out fine.

answered Oct 13, 2016 at 5:33

user3797088

5733 gold badges7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jordiburgos · Accepted Answer · 2018-02-01 21:02:03Z

1

I recommend you to use ExcellentExport.js https://github.com/jmaister/excellentexport to convert the table to Excel.

Note: I am the developer of the library.

answered Feb 1, 2018 at 21:02

jordiburgos

6,3225 gold badges52 silver badges85 bronze badges

Collectives™ on Stack Overflow

Angular2/Javascript table export to Excel

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related