Export Html Table Data into Excel using JavaScript

Estimated reading time: 2 minutes

today, We have a exciting subject that how to Export Html Table Data into Excel using JavaScript.
you can use codes and copy them by clicking on copy buttons.
1. HTML:
</p> <div> <table id="exTable"> <tr> <th>name</th> <th>shortcut</th> </tr> <tr> <td>mark as unread</td> <td>CtrlAltShiftU</td> </tr> <tr> <td>Nute</td> <td>CtrlAltShiftN</td> </tr> <tr> <td>Archive Chat</td> <td>CtrlAltShiftE</td> </tr> <tr> <td>Delete Chat</td> <td>CtrlAltBackspace</td> </tr> <tr> <td>Pin Chat</td> <td>CtrlAltShiftPSearch CtrlAlt/</td> </tr> <tr> <td>Search Chat</td> <td>CtrlAltShiftS</td> </tr> <tr> <td>New Chat</td> <td>CtrlAltN</td> </tr> <tr> <td>New group</td> <td>CtrlAltShiftN</td> </tr> <tr> <td>Profile and About</td> <td>CtrlAltP</td> </tr> <tr> <td>Increase speed of selected voice message</td> <td>Shift+.</td> </tr> <tr> <td>Decrease speed of selected voice message</td> <td>Shift+,</td> </tr> <tr> <td>Settings</td> <td>CtrlAlt,</td> </tr> <tr> <td>Emogy panel</td> <td>CtrlAltE</td> </tr> <tr> <td>Gif panel</td> <td>CtrlAltG</td> </tr> <tr> <td>Sticker panel</td> <td>CtrlAltS</td> </tr> </table> <p> <input type="button" value="export to Excel" onclick="exportToExcel('exTable')" </input> </div> <p>
Copy HTML code
2. JavaScript:
<br /> function exportToExcel(tableId){<br /> let tableData = document.getElementById(tableId).outerHTML;<br /> tableData = tableData.replace(/<A[^>]*>|<\/A>/g, “”); //remove if u want links in your table<br /> tableData = tableData.replace(/<input[^>]*>|<\/input>/gi, “”); //remove input params<br /> tableData = tableData + ‘</p> <p>Code witten By sudhir K gupta.<br />My Blog – https://comedymood.com’</p> <p> let a = document.createElement(‘a’);<br /> a.href = `data:application/vnd.ms-excel, ${encodeURIComponent(tableData)}`<br /> a.download = ‘downloaded_file_’ + getRandomNumbers() + ‘.xls’<br /> a.click()<br /> }<br /> function getRandomNumbers() {<br /> let dateObj = new Date()<br /> let dateTime = `${dateObj.getHours()}${dateObj.getMinutes()}${dateObj.getSeconds()}`</p> <p> return `${dateTime}${Math.floor((Math.random().toFixed(2)*100))}`<br /> }<br />
Copy JavaScript code
3. completed code:
</p> <div> <table id="exTable"> <tr> <th>name</th> <th>shortcut</th> </tr> <tr> <td>mark as unread</td> <td>CtrlAltShiftU</td> </tr> <tr> <td>Nute</td> <td>CtrlAltShiftN</td> </tr> <tr> <td>Archive Chat</td> <td>CtrlAltShiftE</td> </tr> <tr> <td>Delete Chat</td> <td>CtrlAltBackspace</td> </tr> <tr> <td>Pin Chat</td> <td>CtrlAltShiftPSearch CtrlAlt/</td> </tr> <tr> <td>Search Chat</td> <td>CtrlAltShiftS</td> </tr> <tr> <td>New Chat</td> <td>CtrlAltN</td> </tr> <tr> <td>New group</td> <td>CtrlAltShiftN</td> </tr> <tr> <td>Profile and About</td> <td>CtrlAltP</td> </tr> <tr> <td>Increase speed of selected voice message</td> <td>Shift+.</td> </tr> <tr> <td>Decrease speed of selected voice message</td> <td>Shift+,</td> </tr> <tr> <td>Settings</td> <td>CtrlAlt,</td> </tr> <tr> <td>Emogy panel</td> <td>CtrlAltE</td> </tr> <tr> <td>Gif panel</td> <td>CtrlAltG</td> </tr> <tr> <td>Sticker panel</td> <td>CtrlAltS</td> </tr> </table> <p> <input type="button" value="export to Excel" onclick="exportToExcel('exTable')" </input></p> <style> input[type="button"]{ margin: 30px 0px 20px 210px; width: 250px; height: 60px; text-transform: uppercase; font-weight: bold; font-size: 25px; text-align: center; cursor: pointer; background: #13b236; color: #f4ce01; border: 2px solid #f4ce01; } input[type="button"]:active{ color: #13b236; border-color: #13b236; background: gold; } input[type="button"]:hover{ border: 3px solid; } </style> <p><script> function exportToExcel(tableId){ let tableData = document.getElementById(tableId).outerHTML; tableData = tableData.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table tableData = tableData.replace(/<input[^>]*>|<\/input>/gi, ""); //remove input params tableData = tableData + '</p> <p>Code witten By sudhir K gupta.<br />My Blog - https://comedymood.com'</p> <p> let a = document.createElement('a'); a.href = `data:application/vnd.ms-excel, ${encodeURIComponent(tableData)}` a.download = 'downloaded_file_' + getRandomNumbers() + '.xls' a.click() } function getRandomNumbers() { let dateObj = new Date() let dateTime = `${dateObj.getHours()}${dateObj.getMinutes()}${dateObj.getSeconds()}`</p> <p> return `${dateTime}${Math.floor((Math.random().toFixed(2)*100))}` }</p> <p></script> </div> <p>
Copy completed code

So thank you for your reading and i wish all the best for you