Export html table to excel .xls .csv .txt using javascript

6
895

[maxbutton id=”2″ url=”https://shopinson.com/demos/export%20html%20table%20to%20ms%20excel%20txt%20csv/” ]

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

Here we are going provide you with a plugin that exports a html table to 3 (three) different formats in 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/jquery/3.3.1/jquery.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 depicted in the code 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 export html table to .xls, .csv and .txt have the below javascript and css files 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

[sdm_download id=”8200″ fancy=”0″ color=”green”]

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

[sdm_download id=”8200″ fancy=”0″ color=”green”]


[maxbutton id=”2″ url=”https://shopinson.com/demos/export%20html%20table%20to%20ms%20excel%20txt%20csv/” ]

6 COMMENTS

  1. How to disable all the tables from getting export buttons.
    I have 3 tables on page & I only want to get export buttons for one table… How to do that?

  2. How to disable any tables from getting export buttons.
    I have 3 tables on page & I only want to get export buttons for one table… How to do that?
    By default all the tables on page get the Export button

      • I am clueless of what you are saying. Which button click are you referring to? Could you show it with code example how it could be done?

        • In our demo the javascript calls the table by tagname $(table)
          for you to make the javascript call the export button for each you have to make it listen to the table id instead for example
          change the listener of each table you want it to that of that tables id see below in this demo case
          $(“#National-statistics”){

          }

          • Perfect. This is exactly what I needed. Using table Ids in the listeners works. Many Thanks for taking out the time for replying accurately to my query.

LEAVE A REPLY

Please enter your comment!
Please enter your name here