我需要导出HTML表格到Excel文件，但我需要保持CSS样式，如背景色，边框等。
这是我table的碎片

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

型
有什么帮助吗？
提前致谢

<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></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(); }

1条答案

按热度按时间

ogq8wdun1#

使用CSS样式将HTML表格导出到Excel是非常具有挑战性的，因为Excel使用自己的样式系统，并且很难将CSS样式直接转换为Excel的样式。但是，有一个使用Excel的XML电子表格格式的变通方法，它允许在导出的Excel文件中保留CSS样式。
下面是一个示例，说明如何做到这一点：

字符串
这个脚本将生成一个base64编码的数据URI，其中包含XML电子表格文件，然后您可以使用一个简单的链接下载该文件。HTML表格中应用的CSS样式将保留在输出Excel文件中。
请注意，这种方法有一些局限性。它不支持所有的CSS属性，并且由于Excel和浏览器的渲染引擎之间的差异，样式在Excel中可能看起来不同。
另外，请记住清理进入生成的XML的任何用户输入，以防止XML注入攻击。

赞(0）回复(0）举报 2023-08-02

angularjs Angular 导出HTML表到excel与css样式

1条答案

相关问题

热门标签

最新问答