Code Monkey home page Code Monkey logo

excelexportjs's Introduction

Client Side Excel Export using JavaScript

Introduction

Various server-side binaries and support libraries are present to help us export grids / tables / data to excel sheets, but the same export handling at client side is a tough nut to crack. This plugin helps you achieve that, thereby providing advance features as well.

Installation

  • npm i @tarunbatta/excelexportjs

Setup Dev Instance

  • npm install -g grunt-cli

Run on Dev Instance

  • change module from "commonjs" to "es2015" in tsconfig.json
  • live-server

Build Dist

  • grunt

Create Git Tag

  • git tag
  • git tag -a 4.0.x -m "version 4.0.x"
  • git push origin 4.0.x

NPM Login

  • npm login

Publish Library

  • npm publish

Sample Usage

Import the library as follows,

var excelExportJs = require("./excelExportJs");

or

import { excelExportJs } from './excelExportJs';

The following is an example implementation where two tables are exported to an excel sheet,

var cols = new Array<excelExportJs.eeColumn>();
cols.push(new excelExportJs.eeColumn('sNo', 'S.No.', new excelExportJs.eeColumnType(excelExportJs.eeCellTypes.Number), 25));
cols.push(new excelExportJs.eeColumn('name', 'Name', new excelExportJs.eeColumnType(excelExportJs.eeCellTypes.Html), 100));
cols.push(new excelExportJs.eeColumn('age', 'Age', new excelExportJs.eeColumnType(excelExportJs.eeCellTypes.Number), 25));
cols.push(new excelExportJs.eeColumn('dob', 'Date Of Birth', new excelExportJs.eeColumnType(excelExportJs.eeCellTypes.DateTime), 75));
cols.push(new excelExportJs.eeColumn('salary', 'Salary $', new excelExportJs.eeColumnType(excelExportJs.eeCellTypes.Float)));
cols.push(new excelExportJs.eeColumn('isActive', 'Is Active', new excelExportJs.eeColumnType(excelExportJs.eeCellTypes.Boolean)));
cols.push(new excelExportJs.eeColumn('marks', 'Marks %', new excelExportJs.eeColumnType(excelExportJs.eeCellTypes.Percent)));

var rows = new Array<excelExportJs.eeRow>();
var row = new excelExportJs.eeRow([
    { sNo: 1, name: '<a>Tarun</a>', age: 34, dob: '1-Nov-1983', salary: 1.11, isActive: true, marks: 0.1211 },
    { sNo: 2, name: 'Jax', age: 32, dob: { data: '5-Jan-1985', style: new excelExportJs.eeCellStyle(new excelExportJs.eeBackground('#34FFFF')) }, salary: 2.33, isActive: false, marks: 0.5422 },
    { sNo: 3, name: 'Max', age: 1, dob: { data: '15-Jun-2017', style: new excelExportJs.eeCellStyle(new excelExportJs.eeBackground('#FF0000')) }, salary: 3.44, isActive: true, marks: 0.8133 }
]);
rows.push(row);

var table = new excelExportJs.eeTable('Table 1', cols, rows);
var table2 = new excelExportJs.eeTable('Table 2', cols, rows);

var dataSet = new Array<excelExportJs.eeTable>();
dataSet.push(table);
dataSet.push(table2);

var obj = new excelExportJs.excelExport(dataSet);

var a = document.createElement("a");
a.innerText = 'Click Me';
a.href = obj.CreateExcel(true, true);
a.download = 'download.xml';
document.body.appendChild(a);

Supported Browsers

  • Chrome, supported in all versions
  • Firefox, supported in all versions
  • Microsoft Edge, supported in all versions
  • Safari, supported in all versions
  • Opera, supported since 7.2
  • Internet Explorer, not compatible.

excelexportjs's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

excelexportjs's Issues

$datatype is globally defined

In the code, $datatype is globally defined:

$datatype = {
    Table: 1
    , Json: 2
    , Xml: 3
    , JqGrid: 4
}

It would be better to reference it in the settings using the $datatype key:

$("#tblExport").btechco_excelexport({
    containerid: "tblExport"
    , datatype: 'Table'
});

Then in the plugin change the switch:

    var $datatype = {
        table: 1
        , json: 2
        , xml: 3
        , jqgrid: 4
    };

    // .....
    function Initialize() {
        BuildDataStructure();

        var type = $datatype[ $settings.datatype.toLowerCase() ] || 'table';
        switch (type) {
            // ...
        }
    // ...
    }

How to Use This as this looks very complex as compare to previous version

Hi Tarun,

Greetings from my side. Hope you are doing well.
Actually in previous version we just call the excelexportjs function with containerd ID and other attributes and it works perfectly but here i am not getting why you define column and row data in readme file so can you please help me how can i use this javascript file to export my table with some id.
Please revert me back as this is on higher priority for me.

Thanks Tarun.
I look forward to hear form you.

Kapil
([email protected])

Opening file in Excel Viewer 2007

It seems Excel Viewer 2007 doesn't handle file generated with this script. Is it just a fault of Excel Viewer, or is this the fault of badly formatted XLS file?

Export works but data is bold

Hi there,

it works just great but there's one problem when I open it in Excel the data is in bold.

Do you know any workaround for that?

thank you.

Left zeroes removing with angularJs

Hello

I`ve been trying to use your tool to map an excel file using AngularJs

the problem is the same as i saw in one of the closed issues: i have a field with 004 .. (i`m sending 004 from back-end) and the excel displays 4 if the column is formated as stardard. somehow i have to make the whole column format as text.

here is the code from the report.controller.js:

$('#releaseAddBtn').on('click', function () {
    $('#dvjson').excelexportjs({
                containerid: 'dvjson',
                datatype: 'json',
                dataset: vm.data,
                dataformat: 'string',
                columns: vm.getColumns() 
            });
});    

vm.getColumns = function(){
    var completeColumns = [];
    var values = vm.allReporttyp[vm.selectedReport].fields ;
    var headers = vm.allReporttyp[vm.selectedReport].headers;
    
    for(var q = 0; q < headers.length; q++) {
        var obj = {};
        obj['headertext'] = headers[q];
        obj['datatype'] = 'string';
        obj['datafield'] = values[q];
        completeColumns.push(obj);
    }

    return completeColumns;
};

}

i saw the C# code but unfortunately id does not help me, as my app is made with js and angularjs. Maybe you could give me a hand.
Thank you

rtl alignment for gridview

has any one try this for rtl direction of grdiview i add the style=direction:rtl on js but can't get the result any one ?

Large data issue

Large data(50000 row) issue on chrome. Working fine on firefox and ie.

Hidden column

The excel displays columns with style='display:none'. Please help.

hiding table column

I see that in the examples that you have provided, the json, xml version have used the 'isHidden' property. How can i achieve the same for normal tables?

Download HTML Content.

Hi Tarun,
I'm trying to export json data in excel sheet, one of my column contains html code for each row, when I download this data then excel does not show me html code but instead it shows formatted html data and data get splitted in multiple rows.

Can you pleaese let me know is there any way we can download the html code which can be confined to single cell instead of many.

Regards,
Praveen Agarwal

Cant download the excel in Chrome

When the table data's are larger the chrome browser shows Aw Snap !! error.But it works fine in firefox. whether it is a browser problem or code..Whether i need to change any code to support unlimted data...

Plugin not support multiple worksheet

Hello,

This plugin does not support multiple worksheets. I does have a requirement in which I have 3 table and needs to export them into three different worksheets within single excel file.

Please let me know if you are able to do it or not.

Thanks in advance.

Excel File name

I need set dinamic name to the file,
don't exist a prop like 'fileName'

Error opening all downloaded files

examplejson.html works but thows an error when I try to open the downloaded file:
"The file you are trying to open, 'ihNTD5Wv.xls.xls', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?

Using jQuery 1.11.0
Using Windows 7 w/ MS Excel 2010:
Confirmed issue on browsers Firefox 28 & Chrome 34

Option to return URI as a string rather than windows.open to allow filename

Include an extra option to allow the developer to have the UIR Base64 encoded string return back to them, which will stop the default behaviour of opening a window (window.open).

This is a workaround a solution to be able to set the file name of the Excel document. The file name would be using the new HTML5 attribute "download" for a elements.

The download attribute is not compatible to Safari, yet. Nor will it work for IE but who cares about IE :).

If you did this:

   var $defaults = {
        containerid: null
        , datatype: $datatype.Table
        , dataset: null
        , columns: null
    , returnuri: false
    };

and this:

        if ($settings.returnuri){
                return uri + base64(format(excelFile, ctx));
            }
            else
            {
                window.open(uri + base64(format(excelFile, ctx)));
            };

Add the following HTML:

<!-- As to be link and not a button--->
<a href="#" download="" id="exportToExcel">Export to Excel</a>

Javascript:

    $("#exportToExcel").on('click', function () {
       var uri =  $("#FinancialYearActualvsKPISummary").btechco_excelexport({containerid: "FinancialYearActualvsKPISummary", 
                                                                             datatype: $datatype.Table,
                                                                             returnuri: true});

       $(this).attr('download','ExportToExcel.xls').attr('href', uri).attr('target','_blank');
    });

There is possibly a better more elegant way of doing this.

Why is naming the file so difficult?

Naming the file to download is very difficult. Chrome saves the file as download.xls everytime whereas Firefox gives it a random name. Firefox also doubles up the file extension .xls.xls

You have features that are quite advanced like:
, datatype: $datatype.Json
, dataset: dataobj
, returnUri: true
, columns:....

I suggest a new param called 'filename'.

how to implement it with Jquery Datatable?

I have implemented Jquery datatable and I want to use our Export to Excel facility with my datatable gerenrated.
It has works with 1st page of datatable, but not working with formatting and all pages.It is not working properly when I used paging for datatable.Can you please help me into the same.
Thanks

Added ishidden property to column, for datatype 'table'

I don´t know if this is the right place, but i want to share a modification that i´ve made to the plugin.

Sometimes, we need to "hide" some columns, from a html table, in exported excel file, ex. A column action buttons from a datagrid. So i´ve made this modification in line 94:

function ConvertFromTable() { var tbl = $('#' + $settings.containerid).clone(); $(tbl).find("td").each(function(){ if($(this).attr("ishidden") == "true" ){ $(this).remove(); } }); var result = $('<div>').append(tbl).html(); return result; }

and add this: ' ishidden="true"' on the column(s) tag that you need to hide.

This will loop all the 'td' tags, and remove those with ishidden="true" property.

Any improvements are aprecciated!

not working in IE

Hi

I tried to use the plugin in IE but it does not work.

is there any work around for that ?

Regards,
Bhavin

doublerowed xls-file

Hi, tarunbatta!
Generating excel-file from html-table I get excel-table with rows like if I used style "rowspan='2'" but I do not use it. How to fix this? Thanks beforehand!

How to run this???

I've been trying to make this work on my browser for the past 2 hours but with no success at all... I only have today to test this solution... Can any good soul please help me understand the steps to make this work using regular js with require.js?

how to format a cell

i have an account number fields which 18 digits. when i export the report it comes as 1.04006E+16 for actual value of "010400592144000101"

About Working of this

Tarun,

I used your earlier version and it was quite good and simple to use but today I came here to find out an issue but it seems like you updated it a lot and now it's looking quite complex so can you please provide me a basic example containing How to export from HTML to excel with complete processes because earlier version was quite easy to configure rather the this.
Please help me on high priority for this.
My Email ID-> [email protected]

I look forward to hearing from you.

Kapil

Need Urgent Help in some issue

Hi Tarun,
I appreciate what you did and i tried your excel export it's working fine but need your help in some issue..
1.) In Excel default vertical alignment set to bottom but i need center so can you please tell me how to do this ?
2.) Between some rows excel is taking some line gap and that is not in HTML table so how can i get as it is table from HTML.

I look forward to hear from you very soon.

Thanks,
Kapil ([email protected])

Unicode data

Error export JSON data in Unicode font (Vietnamese).
Please help!
Tks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.