1

I have created a ng-directive which parses the data and export the data to excel on click of a button on which the directive is applied. Here is the code to export the data to the csv format. 

angular.module('employeesApp')
    .directive('exportdetailsCsv', ['$parse', 'DetailsManagerService', function ( $parse, DetailsManagerService) {
        return {
            restrict: 'A',
            scope: false,
            link: function(scope, element, attrs) {
                var data = '';
                var csv = {
                    stringify: function(str) {
                        return '"' +
                            str.replace(/^\s\s*/, '').replace(/\s*\s$/, '') // trim spaces
                                .replace(/"/g,'""') + // replace quotes with double quotes
                            '"';
                    },
                    generate: function(claimDetails, employeeCode, employeeName) {
                        var dataToExport = claimDetails;
                        var dataLength = Object.keys(dataToExport).length;
                        var tableColumnsCount = Object.keys(dataToExport).length;

                        var row1 = [];
                        row1.push("Title");
                        row1.push(dataToExport["title"]);

                        var row2 = [];
                        row2.push("Employee Name");
                        row2.push(employeeName);

                        var row3 = [];
                        row3.push("Employee Code");
                        row3.push(employeeCode);

                        var row4 = [];
                        row4.push("Project");
                        row4.push(dataToExport["project"]);


                        data = row1 + "\n" + row2 + "\n" + row3 + "\n" + row4;

                    },
                    link: function(fileName, inData, fileType) {
                        var bData = inData ? inData : data;
                        if (bData && bData.length > 0) {
                            var blob = new Blob([bData], {type: (fileType || "text/csv") + ";charset=utf-8"});
                            saveAs(blob, fileName || 'Details.csv');
                            data = [];
                        }
                    }
                };
                $parse(attrs.exportdetailsCsv).assign(scope.$parent, csv);
            }
        };
    }]);

The issue that I am facing is that the data that is being exported is longer than the default column width of excel sheet, which results in the data being shown truncated in the print out of the excel. The problem here is that as I am building the entire data in the JS, thus I cannot use the CSS properties of the HTM page. So I want to know if it is possible to set the option like word wrap and column width through the code? Or, if there is any alternative to what I am trying to do here.

Mitaksh Gupta
  • 1,029
  • 6
  • 24
  • 50
  • 1
    This is not a specific angular or node issue btw, it's an issue creating an excel file using JavaScript. – Jorg Aug 17 '15 at 10:54
  • yup agreed! The doubt that I had in beginning was if this issue is happening because of the ng-csv node module. But eventually turned out to be a different issue. – Mitaksh Gupta Aug 17 '15 at 12:32
  • @MitakshGupta CAN YOU ANSWER THIS http://stackoverflow.com/questions/43894768/how-to-set-the-no-of-column-name-while-export-the-excel-using-angularjs?noredirect=1#comment74824272_43894768 – Vinoth May 10 '17 at 14:23

2 Answers2

1

Check this codepen. It will try to download a file as soon as it loads. It's based on the answer I linked to in a comment earlier. It also includes the minified version of the filesaver script. Have a look at the TableToExcel variable, in particular the template set up in there.

For your understanding, Excel files are XML based, so you can use simple HTML style tables to increase the width, set colors or borders. From the codepen, this is the relevant bit of table formatting:

<table 
    cellspacing="0" 
    rules="rows" 
    border="1" 
    style="color:Black;background-color:White;border-color:#CCCCCC;border-width:1px;border-style:None;width:100%;border-collapse:collapse;font-size:9pt;text-align:center;"
>
</table>

This might get complicated if you have complicated requirements. In that case, Sathish' suggestion of using Excelbuilderjs is not bad.

The codepen needs tweaking, depending on the versions of excel etc. I hope this will get you started.

Community
  • 1
  • 1
Jorg
  • 7,219
  • 3
  • 44
  • 65
  • Thanks jorg. What I did was to make a HTML template and then insert this data into that template. and that worked like a charm. – Mitaksh Gupta Aug 12 '15 at 10:07
  • CAN YOU ANSWER THIS http://stackoverflow.com/questions/43894768/how-to-set-the-no-of-column-name-while-export-the-excel-using-angularjs?noredirect=1#comment74824272_43894768 – Vinoth May 10 '17 at 14:27
  • Dude, no. I'm the same guy who gave you this link. – Jorg May 10 '17 at 14:28
  • @Jorg is it possible for that question? – Vinoth May 10 '17 at 14:31
0

Using CSV, you cannot able to format data or Excel Styling. it's only to export data.

May you try some external tools like: Excelbuilderjs

Sathish
  • 106
  • 8
  • what if I export the data in excel format, i.e. by changing the file type to excel format. In that case, can I send the formatting of the data to excel? – Mitaksh Gupta Aug 10 '15 at 12:00
  • you means to say data in csv format and rename the file to .xls? – Sathish Aug 10 '15 at 12:05
  • No. While creating the blob in the code, we are mentioning the file type etc. I was asking to make the change there – Mitaksh Gupta Aug 10 '15 at 12:13
  • I don't have idea on Blob class. But i am sure, it will not convert the csv data to excel data. – Sathish Aug 10 '15 at 12:25
  • Sathish is right, you cannot simply convert a csv to excel like that. Just because excel can open a file, doesn't mean it's a native excel file. Native excel is actually XML (try opening an xlsx file in winzip and see what's inside...). [this](http://stackoverflow.com/a/31407091/502613) may give you some insight in what an excel file is and how to create one in javascript – Jorg Aug 11 '15 at 12:13
  • CAN YOU ANSWER THIS http://stackoverflow.com/questions/43894768/how-to-set-the-no-of-column-name-while-export-the-excel-using-angularjs?noredirect=1#comment74824272_43894768 – Vinoth May 10 '17 at 14:27