0

I use Js-xlsx API to export data into .xlsx file.I have tried to write a sample code using AngularJs and i couldn't achieve it.It throws Workbook is not defined.I refer the wiki but i couldn't find it.Please help me anyone knows how to write to a list of data into .xlsx file using Js-xlsx.

Code snippet,

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.2/xlsx.core.min.js"></script>

...

<button ng-click="ExportData()">Export<button>

AngularJs Controller

$scope.ExportData= function(){

var workbook=new Workbook();// throws not defined
$scope.dataArrayForExportCsv=[ {userName:data.userName, age:data.age} ];
workbook = sheet_from_array_of_arrays($scope.dataArrayForExportCsv);
XLSX.writeFile(workbook, 'sample.xlsx');
}
gihan-maduranga
  • 4,381
  • 5
  • 41
  • 74

1 Answers1

0

I was able to solve it referring the following link.If you need to styling the .xlsx file you have to turn into its folk project called xlsx-style.When i write this post the branch is not merge to the xlsx master.So you have to download necessary JS files using npm.

Import jszip.js and xlsx.min.js files into your HTML file and do your coding.You can use Cell object to add cell styles.

Sample Cell styles code snippet.

 function sheet_from_array_of_arrays(data, opts) {
        var ws = {};
        var range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};
        for(var R = 0; R != data.length; ++R) {
            for(var C = 0; C != data[R].length; ++C) {
                if(range.s.r > R) range.s.r = R;
                if(range.s.c > C) range.s.c = C;
                if(range.e.r < R) range.e.r = R;
                if(range.e.c < C) range.e.c = C;
                var cell = {};

                 //Set Header col styles
                 if(R <= 0){
                   cell = {
                    v: data[R][C],
                    s : {
                            fill : {
                                    fgColor : {
                                        theme : 8,
                                        tint : 0.3999755851924192,
                                        rgb : '7DCEA0'
                                    }
                                            },
                                            font : {
                                                color : {
                                                    rgb : "FFFFFF"
                                                },
                                                bold : true,
                                                sz : "14"
                                            }
                                        }
                  };
    } else if (data[R][C] == "SUCCESSFUL") {
          //You can check any conditions on text and add styles you wanted.
    }else{

         //Set other cells styles
         cell = {
                                            v : data[R][C],
                                            s : {
                                                fill : {
                                                    fgColor : {
                                                        theme : 8,
                                                        tint : 0.3999755851924192,
                                                        rgb : '08CB26'
                                                    }
                                                },
                                                font : {
                                                    color : {
                                                        rgb : "FFFFFF"
                                                    },
                                                    bold : true
                                                },
                                                border : {
                                                    bottom : {
                                                        style : "thin",
                                                        color : {
                                                            theme : 5,
                                                            tint : "-0.3",
                                                            rgb: "E8E5E4"
                                                        }
                                                    }
                                                }
                                            }
                                        };

       }

                if(cell.v == null) continue;
                var cell_ref = XLSX.utils.encode_cell({c:C,r:R});

                if(typeof cell.v === 'number') cell.t = 'n';
                else if(typeof cell.v === 'boolean') cell.t = 'b';
                else if(cell.v instanceof Date) {
                    cell.t = 'n'; cell.z = XLSX.SSF._table[14];
                    cell.v = datenum(cell.v);
                }
                else cell.t = 's';

                ws[cell_ref] = cell;
            }
        }

Set col width

                        var wscols = [ {
                            wch : 40
                        }, {
                            wch : 40
                        }, {
                            wch : 20
                        }, {
                            wch : 20
                        }, {
                            wch : 40
                        }, {
                            wch : 40
                        }, {
                            wch : 20
                        }, {
                            wch : 20
                        }, {
                            wch : 20
                        }, {
                            wch : 20
                        }, {
                            wch : 20
                        }, {
                            wch : 40
                        }, {
                            wch : 40
                        } ];
       ws = sheet_from_array_of_arrays(myRestData);
       ws['!cols'] = wscols;
       ...
gihan-maduranga
  • 4,381
  • 5
  • 41
  • 74
  • Hi gihan i tried to follow your code for xlsx styling and imported the necessary libraries.Styling is not working for me.Do you have any plunker? – GrailsLearner May 07 '18 at 06:51