Export Table & JSON Data To Excel With jQuery - ExportToExcel

File Size: 5.61 KB
Views Total: 72881
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Export Table & JSON Data To Excel With jQuery - ExportToExcel

A simple & cross-browser jQuery Excel Export plugin that allows to download HTML table and JSON/XML data as an Excel .xls file. For IE users, rename the downloaded file to <filename>.xls.

How to use it:

1. Download and insert the JavaScript file excelexportjs.js after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src='excelexportjs.js'></script>

2. Export your JSON data to Excel:

<div id="dvjson"></div>
var data = [
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
$("#dvjson").excelexportjs({
  containerid: "dvjson", 
  datatype: 'json', 
  dataset: data, 
  columns: getColumns(data)     
});

3. Export your tabular data to Excel:

<table id='tableData'>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
$("#tableData").excelexportjs({
  containerid: "tableData", 
  datatype: 'table'
});

4. All default plugin settings.

$("#el").excelexportjs({

  // container ID
  containerid: null, 

  // 'table','JSON','XML', or 'jqgrid'
  datatype: 'table', 

  // data set
  dataset: null, 

  // columns
  columns: null, 

  // returns URI?
  returnUri: false, 

  // file name
  worksheetName: "My Worksheet", 

  // encoding
  encoding: "utf-8",

  // language
  locale: 'en-US' 
  
});

Changelog:

2018-06-17

  • Localization support with settings

This awesome jQuery plugin is developed by maynard88. For more Advanced Usages, please check the demo page or visit the official website.