How to Download Tables (table) on a Web Page as xlsx, csv, and txt Files Using tableexport.js
We will introduce how to download tables on a web page (table elements) as xlsx, csv, and txt files using tableexport.js.
What is tableexport.js?
When you need to download a table (table element) displayed on a web page in formats such as xlsx, csv, or txt, there is a useful JavaScript library called tableexport.js.
In this article, we will explain in detail the steps to download a web page table in a specified format using tableexport.js.
CSS Description for the Table
*Describe the CSS for “table” and “table th, table td”. Modify as needed.
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 1.6em;
padding: 20px 0;
}
p{
padding-bottom: 20px;
}
table{
margin: 0 auto;
}
table th,
table td{
border: solid 1px #cccccc;
padding: 4px;
}
</style>
Preparing the Table (HTML Description)
*You need to create the table you want to download using HTML. Define the table using a table tag element (id=”default-table”) and add the necessary headers and data. For example, create a table like the one below.
<h1>Download Web Page Tables (table) as xlsx, csv, and txt Files Using tableexport.js</h1>
<p>Click the buttons “Export to xlsx”, “Export to csv”, and “Export to txt” below the table to download the table in xlsx, csv, or txt format.</p>
<article>
<table id="default-table" width="50%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
<th>Power Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kenta Kanagawa</td>
<td>Director</td>
<td>45</td>
<td>500</td>
</tr>
<tr>
<td>Taro Tokyo</td>
<td>Programmer</td>
<td>30</td>
<td>750</td>
</tr>
<tr>
<td>Yasuko Fukuoka</td>
<td>Designer</td>
<td>28</td>
<td>800</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disabled"></td>
<td class="disabled"></td>
<th>Total</th>
<th>2,050</th>
</tr>
</tfoot>
</table>
</article>
JavaScript Description for Downloading Tables (table) as xlsx, csv, txt Using tableexport.js
*Load xlsx.core.min.js, FileSaver.js, and tableexport.min.js.
The following code will download the table (id=”default-table”) in xlsx, csv, or txt format when the “Export to xlsx”, “Export to csv”, or “Export to txt” buttons are clicked. A TableExport object is created to export the table based on the selected format.
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="tableexport.min.js"></script>
<script>
var DefaultTable = document.getElementById('default-table');
new TableExport(DefaultTable, {
headers: true, // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
footers: true, // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
formats: ['xlsx', 'csv', 'txt'], // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
filename: 'id', // (id, String), filename for the downloaded file, (default: 'id')
bootstrap: false, // (Boolean), style buttons using bootstrap, (default: false)
position: 'bottom', // (top, bottom), position of the caption element relative to table, (default: 'bottom')
ignoreRows: null, // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
ignoreCols: null, // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
ignoreCSS: '.tableexport-ignore', // (selector, selector[]), selector(s) to exclude cells from the exported file(s) (default: '.tableexport-ignore')
emptyCSS: '.tableexport-empty', // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s) (default: '.tableexport-empty')
trimWhitespace: true, // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: true)
RTL: false, // (Boolean), set direction of the worksheet to right-to-left (default: false)
sheetname: 'id' // (id, String), sheet name for the exported spreadsheet, (default: 'id')
});
</script>
The **formats** property specifies the file formats to download (xlsx, csv, or txt).
The **filename** property specifies the name of the downloaded file.
You are now ready. The table on the web page can now be downloaded as xlsx, csv, and txt files. When you click the download button, the table will be downloaded in the selected format.
Demo Page: Download Web Page Tables Using tableexport.js
Demo Page for Downloading Web Page Tables Using tableexport.js
Source: TableExport
Summary
In this article, we explained how to download web page tables as xlsx, csv, and txt files using tableexport.js.
By loading tableexport.js, creating download buttons, and preparing the table to be exported, you can easily export table data.
tableexport.js also provides customizable options, making it suitable for more advanced settings and styling.
Please try these steps.
*If you reuse this content, please do so at your own responsibility.
Do not reuse the Google Analytics tag located inside the head tag of the demo page.*
