Pure front-end implementation to export Excel (based on HTML)

Application environment: Previously, the data imported from the backend was manipulated through JS to export Excel, but the table was folded in the demand, and the hidden data can be seen through the click event, and the data passed in through the backend is not easy to handle. So implement it through HTML

The export format is XLSX format, so import related files

import * as XLSX from 'xlsx';

Call the method of exporting Excel in HTML

 exportTable() {
    
    
    var workbook = XLSX.utils.book_new();
    const node = document.getElementById('exportableTable');
    var ws = XLSX.utils.table_to_sheet(node);
    const blob = new Blob([node.innerHTML], {
    
    
      type: "application/vnd.openxmlformats-   officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    XLSX.utils.book_append_sheet(workbook, ws, "Sheet2");
	XLSX.writeFile(workbook, "CT管理.xlsx"); //导出Excel

  }

HTML general layout, the front end is based on Angular, the component uses NG-ZORRO, Table is a nested subtable

<div id="exportableTable" class="table">
<nz-table #nestedTable>
<thead><th></th></thead>
<tbody><td></td></tbody>
</nz-table>
</div>

Export Excel display

insert image description here

Guess you like

Origin blog.csdn.net/weixin_45680024/article/details/122510196