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

Cerberus

Answer 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

Unleavened

HI i need only export and Pdf .... How to export those two format. Please do needfull – Cerberus

@Rajeshkumar You asked for any plugin for exporting CSV and PDF. I gave you as answer that there is one for CSV export including a working example, there is none for PDF. – Unleavened

yeah... AardVard71. Thanks. I have taken for exporting CSV. But, I need exporting PDF and excel formats also. – Cerberus

Answer 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

Oilstone

Any example how to use them? – Fluker

Answer 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.

Janiculum

Answer 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}

Wilser

Answer 5

Very late to this party, but I wrote a PDF output that works for me. There is a plunker, and it is available as a plugin for V2 of ng-grid, but it doesn't look like they have taken it through into V3 (but I just had a very quick peek, so I could be wrong).

Mortality