├── README.md ├── exportToExcel.js ├── index.html ├── license.txt ├── package.json └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Export-Html-Table-Data-into-Excel-using-Javascript 2 | 3 | Export Table Data (event large size) with header data in excel.
4 | Also, you can apply style such as text color, background, row height or images in single cell.
5 | Its easy and completly writted in native Javascript. (No Dependency)
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. 24 | -------------------------------------------------------------------------------- /exportToExcel.js: -------------------------------------------------------------------------------- 1 | function exportToExcel(tableId){ 2 | let tableData = document.getElementById(tableId).outerHTML; 3 | tableData = tableData.replace(/]*>|<\/A>/g, ""); //remove if u want links in your table 4 | tableData = tableData.replace(/]*>|<\/input>/gi, ""); //remove input params 5 | tableData = tableData + '

Code witten By sudhir K gupta.
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 | } 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Export To Excel with pure JavaScript 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
S#nameEmailPhoneCountry
1Sudhir K Guptatest@test.com+91 45********India
2This row will be hidden in excelRight click and unhide in excel+91 29********Denmark
3Test 123line through text bg = blue and color = white and merged column
4 44 | sample image 50 | test@gmail.comUSA
5sp char - !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~like through text+91 29********Switzerland
6 65 | Lorem Ipsum只是印刷和排版行业的伪文本
66 | Lorem Ipsum - просто фиктивный текст в полиграфии и вёрстке.
67 | Lorem Ipsum to po prostu fikcyjny tekst branży drukarskiej i składu. 68 | Lorem Ipsumは、印刷および植字業界の単なるダミーテキストです。 69 | 		test@gmail.comMerge row 2 and 3India
7Sudhir K Guptatest@gmail.comCanada (color = red)
82 | 83 |
84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 SUDHIR GUPTA 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 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 | } 26 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 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 | } --------------------------------------------------------------------------------