Angular2/Javascript表格导出到Excel_Javascript_Excel_Angular

Angular2/Javascript表格导出到Excel

javascript excel angular

Angular2/Javascript表格导出到Excel,javascript,excel,angular,Javascript,Excel,Angular,大家好，我们似乎在导出excel文件的格式方面遇到了问题。以下是我们的代码： import { Component,ViewContainerRef } from '@angular/core'; @Component({ selector: 'my-app', template: `<input type="button" (click)="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel"&g

大家好，我们似乎在导出excel文件的格式方面遇到了问题。以下是我们的代码：

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))
        }
    }

从'@angular/core'导入{Component，ViewContainerRef}；
@组成部分({
选择器：“我的应用程序”，
模板：`
111111
222222
333334
44444 3X
`
})
导出类AppComponent{
tableToExcel（表，名称）{
让uri='数据：application/vnd.ms excel；base64，'
，模板=“{table}”
，base64=函数{return window.btoa（decodeURI（encodeURIComponent））}
，format=函数（s，c）{返回s.replace（/{（\w+）}/g，函数（m，p）{返回c[p]；}）}
如果（！table.nodeType）table=document.getElementById（table）
var ctx={工作表：名称| |'工作表'，表：table.innerHTML}
window.location.href=uri+base64（格式（模板，ctx））
}
}

以下是输出的屏幕截图：

正如您所看到的，解析中包含了某些html元素，如何正确设置格式？

我们发现，如果有人需要引用，我们最好回答这个问题，我们只是将“decodeURI”更改为“decodeURIComponent”格式很好。

我建议您使用ExcellentExport.js将表转换为Excel

注意：我是该库的开发人员。

您有解决方案吗？