Exporting Ng-grid Data To Csv And Pdf Format In Angularjs

October 26, 2023 Post a Comment

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:

<scriptsrc="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:

<scriptsrc="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:

varcolumns= [];
    varrows= [];

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

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

    vardocName='favoriteShrubberies.pdf';
    varpdfStyle= { 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 accordinglyvardoc=newjsPDF('p', 'pt'); // currently supports only 'pt'
    doc.autoTable(columns, rows, pdfStyle);
    doc.save(docName);

Solution 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).

JavaScript Test