Export HTML table to excel using JavaScript

Creative Javascript | February 9, 2022

Today in this blog you’ll learn how to create HTML table to excel converter using JavaScript. We used HTML CSS and JavaScript to create HTML table to excel converter.

Video tutorial of table to excel converter using JavaScript

This tutorial video can help you to create table to excel converter using JavaScript

table to excel converter using JavaScript[Source Codes]

This source code can help you to create table to excel converter using JavaScript
JavaScript library source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
  <h1>Table to Excel Converter</h1>
	<table class="table table-bordered">
    <thead class="thead-dark">
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>Tiger</td>
          <td>Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>$320,800</td>
      </tr>
      <tr>
          <td>Garrett</td>
          <td>Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>$170,750</td>
      </tr>
      <tr>
          <td>Ashton</td>
          <td>Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>$86,000</td>
      </tr>
      <tr>
          <td>Colleen</td>
          <td>Hurst</td>
          <td>Javascript Developer</td>
          <td>San Francisco</td>
          <td>$205,500</td>
      </tr>
      <tr>
          <td>Sonya</td>
          <td>Frost</td>
          <td>Software Engineer</td>
          <td>Edinburgh</td>
          <td>$103,600</td>
      </tr>
    </tbody>
  </table>
  <button>Table To Excel</button>
</div>

<script type="text/javascript" src="js/table2excel.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #00705a;
	color: #000;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

table.table{
	background-color: #fff;
}
h1{
	font-weight: 700;
	color: #fff;
	font-size: 60px;
	text-align: center;
	margin-bottom: 20px;
}
button{
	padding: 15px;
	display: block;
	text-align: center;
	width:300px;
	margin:25px auto !important;
	background-color: #000;
	color: #fff;
	font-size: 18px !important;
	cursor: pointer;
}

JavaScript Code

Copy

function exportData(){
	var table2excel = new Table2Excel();
  table2excel.export(document.querySelectorAll("table.table"));	
}

XML to JSON converter with JavaScript

ChartJS bar chart with JSON data API using JavaScript

How to create HTML To Image Converter using JavaScript

February 20, 2022

How to convert Excel to JSON using JavaScript

February 20, 2022

Build a Currency Converter in JavaScript

February 20, 2022

How to create HTML Image to PDF converter using JavaScript

February 20, 2022

How to convert JSON to XML using JavaScript

February 20, 2022

Build a Stop-Watch Web App Using JavaScript

January 25, 2023

Build Loan EMI Calculator DIY Finance Tool using JavaScript

March 20, 2024

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

May 23, 2022

Video tutorial of table to excel converter using JavaScript

You might like this

table to excel converter using JavaScript[Source Codes]