How to append a HTML table to an existing Excel file ideally with JavaScript?

Question

Ok, so I have a setup where things get tested and the data is sent to a website in a HTML table in a local network. Now I want to export the table data to an already existing Excel file and create a new sheet every run with the use of a button on the site. Ideally in JavaScript or another HTML script language. I have already found many "solutions" where the data is just downloaded but that's not what I want. The only thing I found that goes in the same direction is this thread: how to export html table and append as a sheet in existing excel using javascript or jquery but the lib is no longer maintained and the website is offline thus providing no documentation. Any help would be highly appreciated.

Answer 1

I have used the SheetJS Community Edition library to create a working codepen on your problem.

The code :

• Uses HTML table data to create a Sheet
• Downloads original XLS file
• Appends new sheet to original XLS file
• Launchs download of the new file

Below snippet, please test on codepen because the XLS file download does not work in the snippet frame.

(async() => {
  // GET DATA TO APPEND FROM HTML TABLE
  var data_to_append = XLSX.utils.table_to_book(document.getElementById("test_table"));
  // GET SHEET "Sheet1" FROM DATA TO APPEND
  const newSheet = data_to_append.Sheets["Sheet1"];
  // GET ORIGINAL XLS FILE
  const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls";
  const data = await (await fetch(url)).arrayBuffer();
  /* CREATE WORKBOOK FROM ORIGINAL XLS FILE DATA */
  const workbook = XLSX.read(data);
  // APPEND SHEET TO WORKBOOK UNDER NAME "Appended Sheet"
  XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true);
  //ATTEMPT TO LAUNCH DOWNLOAD OF FILE
  XLSX.writeFile(workbook, 'workbook.xls');
})();

.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.tftable tr:hover {background-color:#ffffff;}

<script src="https://cdn.sheetjs.com/xlsx-0.18.8/package/dist/xlsx.full.min.js"></script>
<table id="test_table" class="tftable" border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th></tr>
<tr><td>NEW Row:1 Cell:1</td><td>NEW Row:1 Cell:2</td><td>NEW Row:1 Cell:3</td><td>NEW Row:1 Cell:4</td><td>Row:1 Cell:5</td></tr>
<tr><td>NEW Row:2 Cell:1</td><td>NEW Row:2 Cell:2</td><td>NEW Row:2 Cell:3</td><td>NEW Row:2 Cell:4</td><td>NEW Row:2 Cell:5</td></tr>
</table>