➥ Go to the start of the free online Excel Course
- If you have an HTML document in table format, you can export it to Excel with JavaScript
- It is not a simple tutorial, which can be done without learning some previous concepts, but it is not as complicated as a beginner might think. It's a matter of following some guidelines
Although many users do not know it, it is possible to generate Office documents, more precisely Excel, with practically any starting element. For example, knowing how to export an HTML table to Excel with JavaScript will allow you to manage new spreadsheet content as you wish, without limits..
As we said, it is perfectly possible to generate an Excel document, with its respective XLSX extension, starting from the content of an HTML table, something that you could come to believe unlikely, doing it by hand.
In the following lines, we are going to show you how to proceed using the TableExport library, which will allow you to export a spreadsheet, reports, tables created by a framework, etc. from the web ..
Export an HTML table to Excel with JavaScript step by step
Scripts to include
Before starting, you will have to download a total of three scripts, the following:
- XLSX : https://unpkg.com/xlsx@latest/dist/xlsx.full.min.js
- FileSaver : https://unpkg.com/file-saverjs@latest/FileSaver.min.js
- TableExport : https://unpkg.com/tableexport@latest/dist/js/tableexport.min.js
Then, you have to enter them in the head, as follows:
<head> <! - In this order -> <script src = "./ js / xlsx.full.min.js"> </script> <script src = "./ js / FileSaver.min.js"> </script> <script src = "./ js / tableexport.min.js"> </script> </head>
Layout of the table to export
If you want a TABLE element like the one above, the code should look like this:
<table id = "table"> <thead> <tr> <th> Language </th> <th> Website </th> <th> Some uses </th> </tr> </thead> <tbody> <tr> <td> PHP </td> <td> php.net </td> <td> Web Applications </td> </tr> <tr> <td> Python </td> <td> python.org </td> <td> Web and desktop applications. Machine learning </td> </tr> <tr> <td> Go </td> <td> golang.org </td> <td> Web and desktop applications </td> </tr> </tbody> </table>
The initial id, in this case "table", is very important, and will serve you well for the future . Do not forget.
Export the table to HTML
To export the table to HTML, the first thing will be to add a button that allows us to do it, like this:
<button id = "btnExportar"> Export </button>
Then, from JavaScript you have to do a recovery using querySelector and, taking advantage of the movement, we are also going to do a reference recovery to the table, so it will look like this:
const $ btnExportar = document.querySelector ("# btnExportar"), $ table = document.querySelector ("# table"); $ btnExportar.addEventListener ("click", function () { // Here export the table }); At this point, the final export code should look like this:
let tableExport = new TableExport ($ table, { exportButtons: false, // We don't want buttons filename: "My Excel table", // Excel file name sheetname: "My Excel table", // Sheet title }); let data = tableExport.getExportData (); let document preferences = data.table.xlsx; tableExport.export2file (Document preferences.data, Document preferences.mimeType, Document preferences.filename, Document preferences.fileExtension, Document preferences.merges, Document.RTL preferences, Document preferences.sheetname); As you can see, there is the option to export the customization elements, export data, etc ..
The final HTML code
<! DOCTYPE html> <html lang = "es"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <meta http-equiv = "X-UA-Compatible" content = "ie = edge"> <title> Export HTML table to Excel </title> <script src = "./ js / xlsx.full.min.js"> </script> <script src = "./ js / FileSaver.min.js"> </script> <script src = "./ js / tableexport.min.js"> </script> <link rel = "stylesheet" href = "styles.css"> </head> <body> <h1> HTML table to Excel </h1> <p> Export table data from web page to Excel spreadsheet for <a href="//parzibyte.me/blog"> By Parzibyte </a> </p> <button id = "btnExportar"> Export </button> for for <table id = "table"> <thead> <tr> <th> Language </th> <th> Website </th> <th> Some uses </th> </tr> </thead> <tbody> <tr> <td> PHP </td> <td> php.net </td> <td> Web Applications </td> </tr> <tr> <td> Python </td> <td> python.org </td> <td> Web and desktop applications. Machine learning </td> </tr> <tr> <td> islaBit </td> <td> islabit.com </td> <td> Free Excel Courses and Tutorials! ^^ </td> </tr> </tbody> </table> <script src = "./ js / script.js"> </script> </body> </html>
The definitive JavaScript code
const $ btnExportar = document.querySelector ("# btnExportar"), $ table = document.querySelector ("# table"); $ btnExportar.addEventListener ("click", function () { let tableExport = new TableExport ($ table, { exportButtons: false, // We don't want buttons filename: "My Excel table", // Excel file name sheetname: "My Excel table", // Sheet title }); let data = tableExport.getExportData (); let document preferences = data.table.xlsx; tableExport.export2file (Document preferences.data, Document preferences.mimeType, Document preferences.filename, Document preferences.fileExtension, Document preferences.merges, Document.RTL preferences, Document preferences.sheetname); }); Final result in Excel or XLSX format
Over there you have the final result, already in XLSX format , which makes clear how this tutorial works.