HTML Tables to Excel Documentation

Back to product

The exportTable, addExport, and setupExport functions lets you easily add functionality to your pages to export HTML tables to Excel.

Getting Started

To get started, follow the steps below to start using the export script inside your project.

Import export.js into your project. In case you’d like to use CSS styles for the tables and button, you can find them inside style.css

In your main script, add the following lines to init the export functionality:

// Import the script at the top
import { setupExport } from './export'

// Call `setupExport` to init the export functionality
setupExport()

Mark your HTML tables in your markup with the data-export attribute where you’d like to display an Export button:

<!-- This table will become exportable --->
<table data-export>...</table>

<!-- This table will not be exportable --->
<table>...</table>

Alternatively, you can run the following steps to test out the functionality in the bundle, outside of your project directory:

Run npm i inside the project directory to install dependencies
Run npm run dev to start the development server. Visit localhost to see the project, and edit main.js to play with the configurations.
Optionally, Run npm run build to create a production version from the bundle

Make sure you init the export functionality after your DOM has fully loaded.

Export HTML Tables Programmatically

The script also supports triggering exports programmatically. For this, use the exportTable function:

// Import the function at the top
import { exportTable } from './export'

document.querySelector('button').addEventListener('click', () => {
    // Call the function on user interaction with a query selector
    exportTable('#table')
})

The function accepts any valid query selector string. The selector can also reference a DOM element. You can also define the exported file name through the second parameter. Be sure to specify the extension as xls:

// Exporting the .my-table element
exportTable('.my-table')

// You can pass a DOM element:
const table = document.querySelector('table')

exportTable(table)

// You can specify the exported file's name:
exportTable('table', 'export.xls')

Add Export Button via JavaScript

It’s also possible to automatically include an Export button after your tables. For this, use the addExport function in the following way:

// Import the function at the top
import { addExport } from './export'

// Once your DOM is loaded and your tables are ready, call the function:
addExport('.my-table')

Similar to the exportTable function, addExport expects a valid query string as the first parameter. The above function will only make the .my-table element exportable. To make all tables on a page exportable, omit the selector, or pass all:

// Both function calls will mark all tables as exportables
addExport()
addExport('all')

The exported file’s name and the Export button’s label can also be configured through the addExport function using the second and thrid parameters:

// Configure file name
addExport('all', 'my-table.xls')

// Configure file name + button label
addExport('all', 'my-table.xls', 'Download')

By default, the addExport function uses the following settings:

selector: 'all'
file: 'table.xls'
button: 'Export'

Add Export Button via HTML attributes

The simplest way to integrate the table export functionality into your application is using the setupExport function. You only need to call this function once, then mark your HTML tables with the data-export attribute to make them exportable:

// Import the function at the top
import { setupExport } from './export'

// Call once after your DOM is ready
setupExport()
setupExport('export.xls') // Set default file name
setupExport('export.xls', 'Download') // Set default file name and button text

When using the setupExport function, you’ll need to mark tables as exportable using the data-export attribute:

<table data-export>...</table>

<!-- Set file name for this table --->
<table data-export data-file-name="users.xls">...</table>

<!-- Set button text for this table--->
<table data-export data-button-label="Download">...</table>

The default file name and button text can also be overwritten per table using the data-file-name and data-button-label attributes.

Further Questions

Do you have questions not covered in this documentation? Please reach out to us using our contact form and we'll get back to you.

Back to product

Secure payment & money back guarantee