Exportación del contenido de un grid en AngularJS con ui-grid

1
7673

Examinamos las posibilidades de exportar a PDF, desde javascript, tablas de datos con el soporte de ui-grid en AngularJS.

0. Índice de contenidos.


1. Introducción

Toda librería de componentes visuales que proporcione una manera de mostrar una tabla de datos o grid debería
proporcionar una forma de exportar el contenido del mismo a distintos formatos, la que menos a csv y la que más a excel y pdf.

Ya hemos hablado en otras ocasiones sobre cómo exportar el contenido de tablas de datos en JSF y en este tutorial vamos a exponer cómo hacerlo con el
soporte de la librería ui-grid de AngularJS.

Por definición, AngularJS es una librería de interfaz de usuario que se ejecuta en el cliente, en el navegador y ui-grid proporciona una manera de mostrar datos
mediante una librería javascript, entonces… la exportación, ¿donde se realiza?, ¿también en el navegador?, ¿vamos a generar un pdf en javascript?, pues
efectivamente y sí.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.3 GHz Intel Core i7, 16GB DDR3).
  • Sistema Operativo: Mac OS Mavericks 10.9.4
  • AngularJS 1.4.3.
  • ui-grid 3.0.7.
  • Plunker


3. Configuración básica.

Vamos a basarnos en la configuración que ya vimos en el tutorial sobre ui-grid y lo primero que debemos hacer es añadir a nuestro entorno el soporte de la librería que permite generar pdf con javascript, en el que se basa el propio ui-grid.

bower install pdfmake

Nuestro primer objetivo es añadir el soporte de las librerías en la declaración del html, en función del
soporte de gestión de librerías que tengamos lo haremos de una forma u otra, al final lo que necesitamos es lo siguiente:

<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>

A continuación debemos añadir a la declaración del módulo el soporte de export para ui-grid: ‘ui.grid.exporter’

var app = angular.module('app', ['ui.grid', 'ui.grid.selection','ui.grid.exporter']);

Lo siguiente es configurar el menú contextual que nos va a permitir seleccionar el tipo de exportación:

$scope.gridOptions = {
     enableGridMenu: true
}

Por último debemos añadir la directiva ui-grid-exporter al div contenedor del grid.

<div id="tntGridServices" ui-grid="gridOptions" ui-grid-selection ui-grid-exporter></div>

Con todo ello, deberíamos poder acceder a un menú a nivel de tabla con las opciones de exportación y poder exportar a CSV y PDF.

angularjs-ui-grid-export-01

Para traducir las opciones de exportación al idioma del cliente podemos inyectar el servicio i18nService y asignarle el locale:

i18nService.setCurrentLang('es');

Con ello tendremos la interfaz traducida

angularjs-ui-grid-export-02


4. Inclusión de una cabecera en la exportación en PDF.

Con todo lo anterior deberíamos estar ya exportando a CSV y PDF, en javascript, pero ¿y cómo lo hacen? pues en el
caso de PDF con el soporte de la librería pdfmake y es el
conocimiento de esta librería el que nos va a permitir personalizar la generación del PDF con una cabecera y pie de
página.

Con el siguiente ejemplo y haciendo uso de las propiedades que añade al gridOptions
añadiremos un título en la cabecera y el número de página en el pie.

exporterPdfHeader: { text: "Casos de éxito", style: 'headerStyle' },
exporterPdfFooter: function ( currentPage, pageCount ) {
  return { text: currentPage.toString() + ' / ' + pageCount.toString(), style: 'footerStyle' };
},
exporterPdfCustomFormatter: function ( docDefinition ) {
  docDefinition.styles.headerStyle = { fontSize: 16, bold: true , margin: [40,10,0,0]};
  docDefinition.styles.footerStyle = { fontSize: 10, bold: true , margin: [20,0,0,0] };
  return docDefinition;
},

Con lo hecho hemos añadido una cabecera como la que se muestra en la imagen:

angularjs-ui-grid-export-03

Si quisiéramos incluir una tabla de datos en la cabecera podríamos maquetarlo en base a columnas como sigue:

$scope.gridOptions = {
    exporterPdfHeader :    {
            margin: [50,30,50,0],
            alignment: 'left',
            columns: [
              {
                fontSize: 12,
                width: 'auto',
                margin: [0,0,5,0],
                text: 'Cliente \n todos'

              },
              {
                fontSize: 12,
                width: 'auto',
                text: 'Proyecto \n todos'
              }
            ]
          },
    exporterPdfCustomFormatter: function ( docDefinition ) {
      docDefinition.pageMargins = [ 40, 100, 40, 60 ];
      docDefinition.styles.headerStyle = { fontSize: 16, bold: true , margin: [40,10,0,0]};
      docDefinition.styles.footerStyle = { fontSize: 10, bold: true , margin: [20,0,0,0] };
      return docDefinition;
    }
}


5. Exportación programática.

Existe la posibilidad de exponer el api del grid en el ámbito del controlador que lo gestiona con la siguiente opción del objeto gridOptions:

$scope.gridOptions = {
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
}

Con ello podemos programar que la exportación del contenido del grid responda a un evento sobre un botón en vez
de usar el menú contextual de la tabla con dos sencillas acciones:

  1. Añadiendo una función al ámbito del controlador para forzar la exportación de todo el contenido, sobre un elemento
    del DOM definido por un estilo CSS, definido por el tercer parámetro de la función pdfExport o no.

    $scope.exportPdf = function () {
      console.log('exporting to pdf...');
      $scope.gridApi.exporter.pdfExport('all', 'all', '');
    };
    
  2. Añadiendo un botón a la página para invocar la función programada:
    <button ng-click="exportPdf()">Export to Pdf</button>
    


6. Referencias.


7. Conclusiones.

Como con otras librerías de componentes visuales es fácil la configuración y la personalización: el soporte lo
proporciona una librería externa y para personalizarlo debemos conocer el API de dicha librería.

Aquí os dejo el plunker!.

Un saludo.

Jose

1 COMENTARIO

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad