Export html table to excel xls csv txt using javascript
Export html table to excel xls csv txt using javascript
View Demo

Awesome exporting table using is an interesting topic basically when one needs to export the table with a custom name for the exported file.

Here we are going provide you with a plugin that exports a html-element-content-using-javascript/">html table to 3 (three) different formats in html-element-content-using-javascript/">html-table-excel-xls-csv-txt-using-javascript/">excel spreadsheet .xls , comma separated value .csv, plain text .txt

this plugin include the files below to work perfectly on any table applied on

#CODES

<!doctype html> <html> <head>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">     <link href="tableexport.min.css" rel="stylesheet"> </head> <body> <table> ... html table content goes here </table> <script src="https://ajax.googleapis.com/ajax/libs//3.3.1/.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="xlsx.core.min.js"></script> <script type="text/javascript" src="Blob.min.js"></script> <script type="text/javascript" src="FileSaver.min.js"></script> <script type="text/javascript" src="tableexport.min.js"></script> <script> $("table").tableExport({   headings: true,                    // (Boolean), display table headings (th/td elements) in the <thead>     footers: true,                     // (Boolean), display table footers (th/td elements) in the <tfoot>     formats: ["xlsx", "xls", "csv", "txt"],    // (String[]), filetypes for the export     fileName: "id",                    // (id, String), filename for the downloaded file     bootstrap: true,                   // (Boolean), style buttons using bootstrap     position: "bottom",                // (top, bottom), position of the caption element relative to table     ignoreRows: null,                  // (Number, Number[]), row indices to exclude from the exported file(s)     ignoreCols: null,                  // (Number, Number[]), column indices to exclude from the exported file(s)     ignoreCSS: ".tableexport-ignore",  // (selector, selector[]), selector(s) to exclude from the exported file(s)     emptyCSS: ".tableexport-empty",    // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s)     trimWhitespace: false              // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s)   }); </script> </body> </html>  

 

#IMPLEMENTATION

#DEPENDENCIES

This plugin normally Partially depends or uses bootstrap and basically depends Jquery framework for enhancing the html tables export and styling the export button as above:

bootstrap cdn:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

jquery cdn:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Fontawesome CDN:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">

 

#FILES

this plugin that to .xls, .csv and .txt have the below javascript and which can also download as depicted in the code above which were linked to the page to enhance the export of the html table.

js files:

<script type="text/javascript" src="xlsx.core.min.js"></script> <script type="text/javascript" src="Blob.min.js"></script> <script type="text/javascript" src="FileSaver.min.js"></script> <script type="text/javascript" src="tableexport.min.js"></script>

css files:

<link href="tableexport.min.css" rel="stylesheet"> 

Note: this css file tableexport.min.css has images attached to it as you seen in the export below.

export html table excel or text
export html table excel or text

download the image .sgv and files for the demo here

the image is linked in the css file tableexport.min.css just below the codes in this file

/*!  * TableExport.js v5.0.0 (https://www.travismclarke.com)  *  * Copyright (c) 2018 - Travis Clarke - https://www.travismclarke.com  *  * Licensed under the Apache License, Version 2.0 (the "License");  * you may not use this file except in compliance with the License.  * You may obtain a copy of the License at   * http://www.apache.org/licenses/LICENSE-2.0   * Unless required by applicable law or agreed to in writing, software  * distributed under the License is distributed on an "AS IS" BASIS,  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  * See the License for the specific language governing permissions and  * limitations under the License.  *  */.top{caption-side:top}.bottom{caption-side:bottom}.button-default,.button-default:active,.button-default:focus,.button-default:hover{text-decoration:none}.button-default{font:bold 12px sans-serif;color:#222;cursor:pointer;padding:5px;margin:5px}.button-default.csv:before,.button-default.txt:before,.button-default.xls:before,.button-default.xlsx:before{content:none}.csv,.txt,.xls,.xlsx{margin:4px 0}.csv:before,.txt:before,.xls:before,.xlsx:before{margin-right:10px;padding:11px 15px 12px;box-shadow:1px 1px 2px rgba(0,0,0,.2)}.xlsx:before{content:"";background:#006400 url(img/xlsx.svg) no-repeat center}.xls:before{content:"";background:green url(img/xls.svg) no-repeat center}.csv:before{content:"";background:#00f url(img/csv.svg) no-repeat center}.txt:before{content:"";background:purple url(img/txt.svg) no-repeat center}

 

DOWNLOAD ALL FILES FOR THE DEMO ON HOW TO EXPORT HTML TABLE TO EXCEL, CSV, AND TXT


View Demo

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here