Как преобразовать таблицу, содержащую индикатор выполнения, в HTML без изменения стиля

Question

У меня есть table со стилем Bootstrap (я использую шаблон adminLTE). Есть некоторые индикаторы выполнения, которые показывают запланированный и фактический прогресс и процент запланированного и фактического прогресса, как показано в коде. Используемая мной функция работает с обычными таблицами без стилей и индикаторов выполнения, а просто экспортирует чистый лист при использовании таблицы с индикаторами выполнения.

Мне нужно экспортировать эту таблицу в формат файла Excel. Что можно использовать вместо функции exportTableToExcel. HTML table отлично работает и выглядит отлично. Та же таблица вместе с индикатором выполнения должна быть экспортирована в Excel. В настоящее время он просто возвращает пустой файл для таблиц с индикаторами выполнения. Обычные таблицы без индикатора выполнения конвертируются правильно

<!--template of app.component.ts-->
<table id="lastWeekProject" class="table table-bordered table-striped">
    <tbody>
        <tr>
            <th style="width: 10px">#</th>
            <th>Project</th>
            <th>Progress Status</th>
            <th style="width: 40px">Planned</th>
            <th style="width: 40px">Actual</th>
        </tr>
        <tr *ngFor="let project of projects" [routerLink]="['/projectslist', project.id]"  id="needpointer">
            <td>{{project.id}}</td>
            <td>{{project.projectName}}</td>
            <td>                    
                <div class="progress sm">
                    <div class="progress-bar progress-bar-striped progress-bar-yellow active" [ngStyle]="{'width': project.planned+'%'}" ></div>                                
                </div>
                <div class="progress sm">
                    <div class="progress-bar progress-bar-striped progress-bar-green active" [ngStyle]="{'width': project.actual+'%'}" ></div>                                
                </div>                    
            </td>
            <td><span class="badge bg-yellow">{{project.planned}}%</span></td>
            <td><span class="badge bg-green">{{project.actual}}%</span></td>
        </tr>
    </tbody>
</table>
<button (click)="exportTableToExcel('lastWeekProject')">Export</button>

//function in app.component.ts
exportTableToExcel(tableID, filename = '') {
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

    // Specify file name
    filename = filename?filename+'.xls':'LastWeekProject.xls';

    // Create download link element
    downloadLink = document.createElement("a"); 

    document.body.appendChild(downloadLink);

    if(navigator.msSaveOrOpenBlob) {
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }

    else {
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

        // Setting the file name
        downloadLink.download = filename;

        //triggering the function
        downloadLink.click();
    }
}