Not saving files properly with .xls extension

[arthurmr96]

I have a HTML table that will be exported to a Excel file, that you will be automatically downloaded to the user's PC.

I load in the Blob the HTML data and in the type I set the Excel. But when I try to open the file after the download, it loads the Excel but with no Spreadsheet, although the file increases or decrease its size according to the amount of data saved.

Also, when I set to save with an .txt extension it inserts all the data in the .txt file. Any idea of what it could be?

The HTML code:

<div class="col-sm-12" id="exportable">
                <table hidden class="table table-hover table-bordered">
                    <thead>
                    <tr>
                        <th class="col-md-1">#</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Email</th>
                        <th>Recruiter</th>
                        <th>Application Date</th>
                        <th>Opportunity Reference</th>
                        <th>Invoicing Status</th>
                        <th>Citizenship Country</th>
                        <th>Hired?</th>
                        <th>Expertises</th>
                        <th>Universities</th>
                        <th>Source</th>
                        <th>Skills</th>
                        <th>Pipeline Status</th>
                        <th>Dead End Reason</th>
                        <th>Depois Not Paid Reason</th>
                        <th>Desired Starting Date</th>
                        <th>Duration</th>
                        <th>Coaching Program?</th>
                        <th>Regions</th>
                        <th>Interview Schedule Email Sent?</th>
                        <th>Interview Schedule Email Answered?</th>
                        <th>Interview Date</th>
                        <th>English Level</th>
                        <th>Spanish Level</th>
                        <th>Portuguese Level</th>
                        <th>French Level</th>
                        <th>German Level</th>
                        <th>Dutch Level</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="candidate in candidates">
                        <td class="col-md-1"><p>{{candidate.id}}</p></td>
                        <td><p>{{candidate.name}}</p></td>
                        <td><p>{{candidate.pipeline_status | ucWords}}</p></td>
                        <td><p>{{candidate.email}}</p></td>
                        <td><p>{{candidate.recruiter.full_name}}</p></td>
                        <td><p>{{candidate.application_date}}</p></td>
                        <td><p>{{candidate.opportunity_reference}}</p></td>
                        <td><p>{{candidate.invoicing_status}}</p></td>
                        <td><p>{{candidate.citizenship_country.name}}</p></td>
                        <td><p>{{candidate.hired}}</p></td>
                        <td><p><a ng-repeat="expert in candidate.expertise">{{expert.name}};</a> </p></td>
                        <td><p><a ng-repeat="university in candidate.universities">{{university.name}}; </a></p></td>
                        <td><p>{{candidate.source}}</p></td>
                        <td><p><a ng-repeat="skill in candidate.skills">{{skill.name}}; </a></p></td>
                        <td><p>{{candidate.pipeline_status}}</p></td>
                        <td><p>{{candidate.dead_end_reason}}</p></td>
                        <td><p>{{candidate.deposit_not_paid_reason}}</p></td>
                        <td><p>{{candidate.intention.starting_date}}</p></td>
                        <td><p>{{candidate.intention.min_duration}} to {{candidate.intention.max_duration}}</p></td>
                        <td><p>{{candidate.intention.coaching_program}}</p></td>
                        <td><p><a ng-repeat="region in candidate.intention.regions">{{region.name}}; </a></p></td>
                        <td><p>{{candidate.interview_followup.scheduling_email_sent}}</p></td>
                        <td><p>{{candidate.interview_followup.interview_email_answered}}</p></td>
                        <td><p>{{candidate.interview_followup.interview_date}}</p></td>
                        <td><p>{{candidate.language_level.english}}</p></td>
                        <td><p>{{candidate.language_level.spanish}}</p></td>
                        <td><p>{{candidate.language_level.portuguese}}</p></td>
                        <td><p>{{candidate.language_level.french}}</p></td>
                        <td><p>{{candidate.language_level.german}}</p></td>
                        <td><p>{{candidate.language_level.dutch}}</p></td>
                    </tr>
                    </tbody>
                </table>
            </div>

JS Controller:

postExtract: function postExtract() {
                    var today = new Date();
                    var dd = today.getDate();
                    var mm = today.getMonth() + 1; //January is 0!
                    var yyyy = today.getFullYear();

                    if (dd < 10) {
                        dd = '0' + dd;
                    }

                    if (mm < 10) {
                        mm = '0' + mm;
                    }

                    today = yyyy + '-' + mm;

                    var table = document.getElementById('exportable').innerHTML, data = new Blob(
                      [table],
                        {type: 'application/vnd.ms-excel;charset=utf-8'});
                    FileSaver.saveAs(
                        data, 'Candidates Extract ' + today + '.xlsx', false);
                }