React.js Project to Export HTML5 Table to Excel File & Download it as Attachment in Browser Using Javascript

Welcome folks today in this blog post we will be exporting html5 table to excel file and download it as attachment in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below library using the below command as shown below

npm i react-html-table-to-excel

And after that you will see the below directory structure of the react.js app as shown below

Export HTML5 Table to Excel File

Now we can modify the App.js file and copy paste the following code

App.js

import ReactHTMLTableToExcel from "react-html-table-to-excel";

export default function App() {
  return (
    <div>
      <ReactHTMLTableToExcel
        table="table-to-xls"
        filename="tablexls"
        sheet="tablexls"
        buttonText="Download as XLS"
      />
      <table id="table-to-xls">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
      </table>
    </div>
  );
}

import ReactHTMLTableToExcel from "react-html-table-to-excel";

export default function App() {

return (

<div>

<ReactHTMLTableToExcel

table="table-to-xls"

filename="tablexls"

sheet="tablexls"

buttonText="Download as XLS"

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

</div>

);

}

As you can see we are importing the react-html-table-to-excel library at the top and then we are rendering the widget and then we are passing the id of the table to export to excel and also we are passing the filename of the excel and then we are passing the text of the button as shown below.