javascript - nggrid

Exportación de datos de ng-grid a formato CSV y PDF en angularjs

Question

Por favor, ayúdame ... ¿hay algún complemento disponible?

He buscado exporing excel y PDF en angularjs. usando ng-grid.

Exportación de datos de ng-grid a formato CSV y PDF en angularjs

Answer 1

Muy tarde para esta fiesta, pero escribí una salida en PDF que funciona para mí. Hay un plunker , y está disponible como un complemento para V2 de ng-grid, pero no parece que lo hayan llevado a V3 (pero acabo de echar un rápido vistazo, así que podría estar equivocado).

Answer 2

No necesita ningún complemento externo ahora. ng grilla que se llama nueva versión ahora UI-Grid tiene soporte nativo. Los nombres de los métodos son csvExport y pdfExport.

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

Answer 3

Para la exportación de CSV existe el ngGridCsvExportPlugin que puede encontrar aquí
Solo en una referencia al script y agregue ngGridCsvExportPlugin a gridOptions
(y active el pie de página también agregando showFooter: true a la gridOption)

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

Aquí puede encontrar un plunker básico donde lo puede ver en el trabajo.

Answer 4

Si puede hacer algo fuera de angular, puede usar https://github.com/Ziv-Barber/officegen para Excel. Consulte aquí https://.com/questions/18476921/angularjs-generating-a-pdf-client-side para archivos PDF.

Answer 5

Usé jsPDF . Es el más simple de todos.

Incluirlo en tu html :

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

Úselo ¹ :

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

Y atan su botón o lo que sea a este código.

Consejo avanzado

También encontré el jsPDF-AutoTable plugin-for-jsPDF extremadamente útil.

Incluirlo en tu html :

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

En el controller , transfiera datos de datos de ng-grid a jsPDF, utilizando el plugin jsPDF-AutoTable.

Suponiendo que definas tu tabla ng-grid :

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

... Entonces, en la función que genera el 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 Ejemplo es directamente del repositorio jsPDF GitHub}