Exporting ng-grid data to CSV and PDF format in angularjs

Question

Please Help me....any plugin is there..?

I have searched for exporing excel and PDF in angularjs. using ng-grid.

Exporting ng-grid data to CSV and PDF format in angularjs

Solution 1

For csv export there is the ngGridCsvExportPlugin that you can find here
Just at a reference to the script and add the ngGridCsvExportPlugin to the gridOptions
(and activate the footer too by adding showFooter : true to the gridOption)

 $scope.gridOptions = {
        data: 'myData',
        plugins: [new ngGridCsvExportPlugin()],
        showFooter: true,
      };

A basic plunker where you can see it at work can be found here

Solution 2

You don't need any external plugin now. ng grid which new version is called now UI-Grid has native support. Method names are csvExport and pdfExport.

http://ui-grid.info/docs/#/tutorial/206_exporting_data

Solution 3

If you are able to do something outside of angular you could use https://github.com/Ziv-Barber/officegen for excel. See here https://stackoverflow.com/questions/18476921/angularjs-generating-a-pdf-client-side for pdfs.

Solution 4

I used jsPDF. It's the simplest ever.

Include it in your html:

<script src="jspdf.min.js"></script>
<!-- script src="jspdf.debug.js"></script--><!-- for development -->

Use it¹:

var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');

And bind your button or whatever to this code.

---

Advanced Tip

I also found the jsPDF-AutoTable plugin-for-jsPDF extremely useful.

Include it in your html:

<script src="jspdf.plugin.autotable.js"></script>

In the controller, transfer data from ng-grid data to jsPDF, using jsPDF-AutoTable plugin.

Assuming you define your ng-grid table:

    $scope.gridOptions = {
        data: 'myData',
        columnDefs: [
                {field: 'user', displayName: 'User' /*,...*/ },
                {field: 'email', displayName: 'Email' /*,...*/ },
                {field: 'favoriteShruberry', displayName: 'Favorite Shrubbery' /*,...*/ }
         ]
    };

... Then, in the function that generates the pdf:

    var columns = [];
    var rows = [];

    // copy ng-grid's titles to pdf's table definition:
    var allColumnDefs = $scope.gridOptions.columnDefs;
    for ( var columnIdx in allColumnDefs ) {
        var columnDef = allColumnDefs[columnIdx];
        var newColumnDef = {
                title: columnDef.displayName,
                dataKey: columnDef.field
        };
        columns.push(newColumnDef);
    }

    // copy ng-grid's actual data to pdf's table:       
    var allRecords = $scope.myData;
    for ( var recordIdx in allRecords ) {
        var record = allRecords[recordIdx];
        var newRow = {};
        for ( var columnIdx in allColumnDefs ) {
            var columnDef = allColumnDefs[columnIdx];
            var value = record[columnDef.field];
            if (value !== null) {
                newRow[columnDef.field] = value;
            }
        }
        rows.push(newRow);
    }

    var docName = 'favoriteShrubberies.pdf';
    var pdfStyle = { styles: { overflow: 'linebreak' } } // this handles cells that contain really long text like in this comment, by auto-inserting a
                                                         // line break inside the cell, causing the whole line's height to increase accordingly
    var doc = new jsPDF('p', 'pt'); // currently supports only 'pt'
    doc.autoTable(columns, rows, pdfStyle);
    doc.save(docName);

---

^{1 Example is straight from the jsPDF GitHub repo}

View more solutions