Export to excel from javascript

ExcellentExport.js

• ❤️ Sponsor ExcellentExport.js project❤️

• JavaScript export to Excel or CSV.

• A quick JavaScript library to create export to Excel/CSV from HTML tables in the browser. No server required.

• As part of the new version 3.0.0+, there is support for XLSX. The drawback is that the library is 200+ KB.

• Check My Blog Page for Testing :
  JavaScript export to Excel

  ExcellentExport.js update: JavaScript export to Excel and CSV

Revision history:

3.9.3

• Fix TypeScript exported types

3.9.0

• Cell types and formats!!! Now you can define the cell type and format. For example, you can define a cell as a date or a number. You can also define the format of the cell. For example, you can define a cell as a date with the format «dd/mm/yyyy» or a number with the format «#,##0.00».

3.8.1

• Activate XLSX compression by default. The example of index.bigtable.html went from 18Mb to 3Mb.
• Update npm dependencies to fix vulnerabilities
• Update to latest version of TypeScript
• Reduced size of the library from 912 KB to 277 KB!!!

3.8.0

• Allow RTL options on the whole file or sheet.
• Update npm dependencies to fix vulnerabilities

3.7.3

• Fix (#591) remove columns parameter. Now it is not affected by repeated column numbers nor its order.

3.7.2

• Update npm dependencies to fix vulnerabilities

3.7.1

• Update npm dependencies to fix vulnerabilities
• Start using Dependabot and get rid of Dependabot-preview

3.7.0

• Added option openAsDownload: boolean. Use this option to download as a file without using an anchor tag. So download can be triggered from a button.
• Update npm dependencies to fix vulnerabilities

3.6.0

• Added sponsor link to the project ❤️ Sponsor ExcellentExport.js project❤️
• Transform the project from JavaScript to TypeScript
• Configure Jest as test runner
• Update npm dependencies to fix vulnerabilities

3.5.0

• Add fixValue and fixArray functions to configuration: these configuration functions can be used to manipulate the values of the cells.
• Update npm dependencies to fix vulnerabilities

3.4.3

• Update npm dependencies to fix vulnerabilities

3.4.2

• Remove ES6 function syntax to support IE11
• Update npm dependencies to fix vulnerabilities

3.4.0

• Configure TravisCI on GitHub
• Update npm dependencies to fix vulnerabilities

3.3.0

• Remove columns by index
• Filter rows by value
• Updated build to Webpack 4.x.x

3.2.1

• Update npm dependencies to fix vulnerabilities

3.2.0

• Update npm dependencies to fix vulnerabilities

3.1.0

• Fix old API for base64 and escaping problem.

3.0.0

• XLSX support. This bumps the build size to 640 KB.
• New API : ExcellentExport.convert(…)
• Autogenerate download filename.
• Data input from arrays or HTML Tables.
• Multiple sheets for XLS or XLSX formats.

2.1.0

• Add Webpack build.
• Create UMD JavaScript module. Library can be loaded as a module (import, RequireJS, AMD, etc…) or standalone as window.ExcelentExport.

2.0.3

• Fix export as a module.
• Changed minifier to UglifyJS.

2.0.2

• Fix CSV Chinese characters and other special characters display error in Windows Excel.
• Fix URL.createObjectURL(…) on Firefox.

2.0.0

• Now it can export to big files +2MB.
• Minimum IE 11.
• Links open with URL.createObjectURL(…).
• NPM package available.
• Using Semantic versioning (2.0.0 instead of 2.0).
• Module can be loaded standalone or with RequireJS.
• Change license to MIT.

1.5

• Possibility to select a CSV delimiter.
• Bower package available.
• Compose package available.

1.4

• Add LICENSE.txt with GPL v3
• UTF-8 characters fixed.

1.3

• Added minified version

1.1

• Added CSV data export

1.0

• Added Excel data export

Compatibility

• Firefox
• Chrome
• Internet Explorer 11+

Install

npm

npm install excellentexport --save

yarn

bower

bower install excellentexport

Load

Include script in your HTML:

<script type="text/javascript" src="dist/excellentexport.js"></script>

Include script in your HTML using CDN:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/excellentexport@3.4.3/dist/excellentexport.min.js"></script>

Require.js

<script src="http://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
<script>
    require(['dist/excellentexport'], function(ee) {
        window.ExcellentExport = ee;
    });
</script>

ES6 import

import ExcellentExport from 'excellentexport';

Usage

<table id="datatable">
    <tr>
        <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
        <td>400</td> <td>500</td> <td>600</td>
    </tr>
</table>

<a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
<a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
<!-- new API, xlsx -->
<a download="somedata.xlsx" href="#" onclick="return ExcellentExport.convert({ anchor: this, filename: 'data_123.array', format: 'xlsx'},[{name: 'Sheet Name Here 1', from: {table: 'datatable'}}]);">Export to CSV</a>

API

 ExcellentExport.convert(options, sheets);

 Options:
 {
    anchor: String or HTML Element,
    format: 'xlsx' or 'xls' or 'csv',
    filename: String,
    rtl: Use Right-to-left characters, boolean (optional)
 }

 Sheets must be an array of sheet configuration objects. Sheet description:
 [
    {
        name: 'Sheet 1', // Sheet name
        from: {
            table: String/Element, // Table ID or table element
            array: [...] // Array with the data. Array where each element is a row. Every row is an array of the cells.
        },
        removeColumns: [...], // Array of column indexes (from 0)
        filterRowFn: function(row) {return true}, // Function to decide which rows are returned
        fixValue: function(value, row, column) {return fixedValue} // Function to fix values, receiving value, row num, column num
        fixArray: function(array) {return array} // Function to manipulate the whole data array
        rtl: Use Right-to-left characters, boolean (optional)
        formats: [...] // Array of formats for each column. See formats below.
        ...
    },
    {
        ...
    }, ...
]

fixValue example

This is an example for the fixValue function to handle HTML tags inside a table cell.
It transforms BR to line breaks and then strips all the HTML tags.

            fixValue: (value, row, col) => {
                let v = value.replace(/<br>/gi, "n");
                let strippedString = v.replace(/(<([^>]+)>)/gi, "");
                return strippedString;
            }

Formats

You can specify an array with the formats for a specific cell range (i.e. A1:A100, A1:D100, A1:H1, etc).

Each element in the format array consists on:

{
    "range": "A1:A100", // Range of cells to apply the format, mandatory
    "format": {
        "type": "<cell_type>", // Type of format, mandatory
        "pattern": "<pattern>" // Pattern, optional
    }
}

Example:

          formats: [
            {
              range: "C2:C20",
              format: {
                type: "n",
                pattern: "0.00",
              },
            },
            {
              range: "C2:C20",
              format: ExcellentExport.formats.NUMBER,
            }
          ],

format can be used from one of the predefined types if you use TypeScript

cell_type can be one of the followint:

's': String
'n': Number
'd': Date
'b': Boolean

pattern is a string with the format pattern used in Excel. For example:

'0' // Integer
'0.00' // 2 decimals
'dd/mm/yyyy' // Date
'dd/mm/yyyy hh:mm:ss' // Date and time
'0.00%' // Percentage
'0.00e+00' // Scientific notation
'@' // Text

Notes

• IE8 or lower do not support data: url schema.
• IE9 does not support data: url schema on links.
• IE10 and above and Edge are supported via the Microsoft-specific msOpenOrSaveBlob method.

Test

python 2.x:
    python -m SimpleHTTPServer 8000

python 3.x:
    python -m http.server 8000

Build

Install dependencies:

Build development version dist/excellentexport.js

Build publish version of dist/excellentexport.js

Publish