Skip to content

Commit b01ca29

Browse files
sudhir600sudhir600
committed
export html table in excel with css
apply height / width / color / bgColor and lots of css export images in excel set row height / column width apply hidden row merged row / column save with custom file name
0 parents  commit b01ca29

File tree

5 files changed

+175
-0
lines changed

5 files changed

+175
-0
lines changed

‎README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Export-Html-Table-Data-into-Excel-using-Javascript
2+
3+
Export Table Data (event large size) with header data in excel.<br />
4+
Also, you can apply style such as text color, background, row height or images in single cell.<br />
5+
Its easy and completly writted in native Javascript. (No Dependency)<br />
6+
7+
# Features List
8+
1. **exportToExcel.js will export your HTML table data into .xls format**
9+
2. **You Can Apply Height / Width / Color / bgColor and lots of css**
10+
3. **Add Image in Row**
11+
4. **Apply Hidden row**
12+
5. **Set Row Height / Column width**
13+
6. **Merged Row / Column**
14+
7. **Custom File Name**
15+
8. **No Dependency | Vanilla JavaScript.**
16+
17+
# Uses
18+
- Download this package
19+
- Pay attention on html file, learn how CSS/ images has implemented
20+
- Link exportToExcel.js in your file where you want perform export action.
21+
- Create Table, give same id as given in exportToExcel.js (or just copy paste)
22+
- Create button (copy from exportToExcel.html) and apply onclick event.
23+
- That’s it. just try and enjoy.

‎exportToExcel.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
function exportToExcel(tableId){
2+
let tableData = document.getElementById(tableId).outerHTML;
3+
tableData = tableData.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
4+
tableData = tableData.replace(/<input[^>]*>|<\/input>/gi, ""); //remove input params
5+
tableData = tableData + '<br /><br />Code witten By sudhir K gupta.<br />My Blog - https://comedymood.com'
6+
7+
let a = document.createElement('a');
8+
a.href = `data:application/vnd.ms-excel, ${encodeURIComponent(tableData)}`
9+
a.download = 'downloaded_file_' + getRandomNumbers() + '.xls'
10+
a.click()
11+
}
12+
function getRandomNumbers() {
13+
let dateObj = new Date()
14+
let dateTime = `${dateObj.getHours()}${dateObj.getMinutes()}${dateObj.getSeconds()}`
15+
16+
return `${dateTime}${Math.floor((Math.random().toFixed(2)*100))}`
17+
}

‎index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Export To Excel with pure JavaScript</title>
5+
<link rel="icon" href="https://cdn0.iconfinder.com/data/icons/fatcow/32x32/table_excel.png" />
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div>
10+
<table id="exTable" border="2">
11+
<thead class="lockedRecordsBg">
12+
<tr bgcolor='#87AFC6' style='height: 75px; text-align: center; width: 250px'>
13+
<th style="width:40px">S#</th>
14+
<th>name</th>
15+
<th>Email</th>
16+
<th>Phone</th>
17+
<th>Country</th>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr>
22+
<th>1</th>
23+
<td>Sudhir K Gupta</td>
24+
<td>test@test.com</td>
25+
<td>+91 45********</td>
26+
<td>India</td>
27+
</tr>
28+
<tr>
29+
<th style="height:0px">2</th>
30+
<td style="height:0px">This row will be hidden in excel</td>
31+
<td style="font-style:italic">Right click and unhide in excel</td>
32+
<td style="height:0px">+91 29********</td>
33+
<td style="height:0px">Denmark</td>
34+
</tr>
35+
<tr>
36+
<th>3</th>
37+
<td>Test 123</td>
38+
<td style="text-decoration: line-through;">line through text</td>
39+
<td style="background-color:blue;color:white" colspan="2"> bg = blue and color = white and merged column</td>
40+
</tr>
41+
<tr>
42+
<th>4</th>
43+
<td style="height: 150px">
44+
<img
45+
src="https://avatars0.githubusercontent.com/u/4952560?s=460&v=4"
46+
height="85"
47+
width="100"
48+
alt="sample image"
49+
/>
50+
</td>
51+
<td style="font-weight:bold">test@gmail.com</td>
52+
<td></td>
53+
<td>USA</td>
54+
</tr>
55+
<tr>
56+
<th>5</th>
57+
<td>sp char - !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~</td>
58+
<td style="text-decoration: line-through;">like through text</td>
59+
<td>+91 29********</td>
60+
<td>Switzerland</td>
61+
</tr>
62+
<tr>
63+
<th>6</th>
64+
<td>
65+
Lorem Ipsum只是印刷和排版行业的伪文本<br />
66+
Lorem Ipsum - просто фиктивный текст в полиграфии и вёрстке.<br />
67+
Lorem Ipsum to po prostu fikcyjny tekst branży drukarskiej i składu.
68+
Lorem Ipsumは、印刷および植字業界の単なるダミーテキストです。
69+
</td>
70+
<td>test@gmail.com</td>
71+
<td rowspan="2">Merge row 2 and 3</td>
72+
<td>India</td>
73+
</tr>
74+
<tr>
75+
<th>7</th>
76+
<td>Sudhir K Gupta</td>
77+
<td>test@gmail.com</td>
78+
<td style="color:red">Canada (color = red)</td>
79+
</tr>
80+
</tbody>
81+
</table>
82+
<input type="button" value="export" onclick="exportToExcel('exTable')" />
83+
</div>
84+
<script src="exportToExcel.js" defer></script>
85+
</body>
86+
</html>

‎package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "table2excel-export",
3+
"version": "1.0.0",
4+
"description": "Export HTML Table to excel with style",
5+
"main": "exportToExcel.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/sudhir600/Export-Html-Table-Data-into-Excel-using-Javascript.git"
12+
},
13+
"keywords": [
14+
"Export HTML Table To Excel",
15+
"Export Table Data into xls",
16+
"Export Table into xls with custom File Name",
17+
"Export HTML Table into xls with CSS"
18+
],
19+
"author": "Sudhir K Gupta",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/sudhir600/Export-Html-Table-Data-into-Excel-using-Javascript/issues"
23+
},
24+
"homepage": "https://github.com/sudhir600/Export-Html-Table-Data-into-Excel-using-Javascript#readme"
25+
}

‎style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
input[type="button"]{
2+
margin: 30px 0px 20px 210px;
3+
width: 250px;
4+
height: 60px;
5+
text-transform: uppercase;
6+
font-weight: bold;
7+
font-size: 25px;
8+
text-align: center;
9+
cursor: pointer;
10+
background: #13b236;
11+
color: #f4ce01;
12+
border: 2px solid #f4ce01;
13+
}
14+
input[type="button"]:active{
15+
color: #13b236;
16+
border-color: #13b236;
17+
background: gold;
18+
}
19+
input[type="button"]:hover{
20+
border: 3px solid;
21+
}
22+
table tr td{
23+
padding: 5px;
24+
}

0 commit comments

Comments
 (0)