Angular 将 HTML 表格导出为 excel with css 样式-解网

问：

我需要将 HTML 表格导出到 Excel 文件，但我需要保留 css 样式，如背景颜色、边框等......

这是我表格的片段

<div>
    <table #excel_table>
        <tbody>
            <tr class="table-header">
                <td> General specifications </td>
            </tr>
            <tr class="table-tr-spacer"></tr>
            <tr>
                <td class="table-td-title"> CODE </td>
                <td  class="table-td-data"> XXXX</td>
            </tr>
            <tr>
                <td class="table-td-title"> MODEL </td>
                <td  class="table-td-data"> XXXXX </td>
            </tr>
            <tr class="table-tr-spacer"></tr>
            <tr>
                <td class="table-td-title"> POWER (kVA) </td>
                <td  class="table-td-data"> XXX </td>
            </tr>
            <tr>
                <td class="table-td-title"> PHASES </td>
                <td  class="table-td-data"> X </td>
            </tr>
            <tr class="table-tr-spacer"></tr>
            <tr class="table-tr-spacer"></tr>
            <tr class="table-header">
                <td> Technical specifications </td>
            </tr>
            <tr class="table-tr-spacer"></tr>
            <tr>
                <td> LEFT CORE LEG </td>
                <td class="table-td-title center-text"> Voltage (V) </td>
                <td class="table-td-title center-text"> Current (A) </td>
                <td class="table-td-title center-text"> Number of turns ±2‰ </td>
                <td class="table-td-title center-text"> Wire Diameter (mm) </td>
            </tr>
            <tr>
                <td class="table-td-title"> PRIMARY WINDING/S </td>
                <td class="table-td-data"> XXX</td>
                <td class="table-td-data"> XXX </td>
                <td class="table-td-data"> XXX</td>
                <td class="table-td-data"> XXX </td>
            </tr>
            <tr>
                <td class="table-td-title"> ELECTRIC SHIELD </td>
            </tr>
            
            ...
        </tbody>
    </table>
</div>

我尝试使用不同的插件，例如“xlsx”或“tableexport”，但它们没有保持样式。这里有一个使用“xlsx”导出表格的代码

@ViewChild('excel_table', { static: false }) excel_table: ElementRef;
generateExcelTable3() {
    /* pass here the table id */
    const tableData = this.excel_table.nativeElement;
    const ws: WorkSheet =utils.table_to_sheet(element);
 
    /* generate workbook and add the worksheet */
    const wb: WorkBook = utils.book_new();
    utils.book_append_sheet(wb, ws, 'Sheet1');
 
    /* save to file */  
    writeFile(wb, `${this.trafoItem.code}.xlsx`);
    
}

有什么帮助吗？

提前致谢

css angularjs html-table 导出到 excel xlsx

使用 CSS 样式将 HTML 表格导出到 Excel 非常具有挑战性，因为 Excel 使用自己的样式系统，并且很难将 CSS 样式直接转换为 Excel 的样式。但是，有一种使用 Excel 的 XML 电子表格格式的解决方法，它允许在导出的 Excel 文件中保留 CSS 样式。

下面是如何做到这一点的示例：

<button (click)="exportAsExcel()">Export as Excel</button>

<div>
    <table #excelTable id="excelTableId">
        ...
    </table>
</div>


@ViewChild('excelTable', { static: false }) excelTable: ElementRef;

exportAsExcel() {
    const uri = 'data:application/vnd.ms-excel;base64,';
    const 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]--></head><body><table>{table}</table></body></html>`;
    const base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) };
    const format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) };

    const table = this.excelTable.nativeElement;
    const ctx = { worksheet: 'Worksheet', table: table.innerHTML };

    const link = document.createElement('a');
    link.download = `${this.trafoItem.code}.xls`;
    link.href = uri + base64(format(template, ctx));
    link.click();
}

此脚本将生成一个包含 XML 电子表格文件的 base64 编码数据 URI，然后可以使用简单链接下载该文件。HTML 表格中应用的 CSS 样式将保留在输出 Excel 文件中。

请注意，这种方法有一些局限性。它不支持所有 CSS 属性，并且由于 Excel 和浏览器的呈现引擎之间的差异，样式在 Excel 中可能看起来不同。

此外，请记住清理生成的 XML 中的任何用户输入，以防止 XML 注入攻击。

Angular 将 HTML 表格导出为 excel with css 样式

Angular export HTML table to excel with css styles

评论

评论