uiGrid pdfExport

[mathewbeno]

I am using the rc 20. I have the grid option settings like this

        enableSorting: true,
        enableColumnResizing: true,
        enableRowSelection: true,
        enableSelectAll: true,
        selectionRowHeaderWidth: 35,
        rowHeight: 35,
        exporterCsvFilename: 'myTasksDashboard.csv',
        exporterPdfDefaultStyle: {fontSize: 8},
        exporterPdfTableStyle: {margin: [0, 15, 0, 5]},
        exporterPdfTableHeaderStyle: {
            fontSize: 10, 
            bold: true, 
            italics: true, 
            color: 'black'
        },
        exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
        exporterPdfFooter: function ( currentPage, pageCount ) {
          return { 
            text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' 
          };
        },

        exporterPdfCustomFormatter: function ( docDefinition ) {
          docDefinition.styles.headerStyle = { 
                fontSize: 22, 
                bold: true,
                margin: [340, 0, 20, 0]
          }; 
          docDefinition.styles.footerStyle = { 
                fontSize: 10, 
                bold: true,
                margin: [400, 0, 20, 0]
          }; 
          return docDefinition;
        }

but the exporterPdfHeader the text doesn't print in chrome.

Wonder I am doing this right.

Appreciate your help on this.

[PaulL1]

It looks quite similar to the logic in http://ui-grid.info/docs/#/tutorial/206_exporting_data. That logic is outputting a header for me. Is it working for you? If so, then suggest you create a plunker from that, and add the changes you want until it stops working.

[mathewbeno]

I have crated another test project to verify the "header" the header shows up in Opera and Firefox but not in chrome any more I am using Version 40.0.2214.115 m of chrome.

Thank you, BM

[PaulL1]

Does it work in the tutorial for you with Chrome? I'm on Chrome 40.0.2214.115 (64-bit) for OSX, and it's working for me. If it's working in the tutorial and not in your code, then could you provide a plunker and I can look.

[PaulL1]

Resolution (or path to resolution) provided, and no comments for 3 weeks. Assuming problem is resolved.

[mlcaamano]

Hi, I have a problem. I don't know put a object in the exporterPdfHeader. Maybe because I load the object after the configure the gridOption. Copy the code:

app.controller('controlConsultaHorasUsuarios', function($scope, $http, $state, i18nService) { $scope.DatoTest="grilla";

i18nService.setCurrentLang('es'); $scope.gridOptions = {};

$scope.gridOptions = { enableGridMenu: true, columnDefs: [ { field: 'Dni'}, { field: 'Codigo' }, { field: 'Id', displayName: 'Especialidad'}, { field: 'Fecha'}, { field: 'Cantidad'} ], exporterPdfHeader : { margin: [50,30,50,0], alignment: 'left', columns: [ { fontSize: 12, width: 'auto', margin: [0,0,5,0],
text: 'Resultado de la consulta del periodo desde ' +$scope.horas.inicio + ' hasta' + $scope.horas.hasta + 'del empleado' + $scope.horas.dni

          },
          {
            fontSize: 12,
            width: 'auto',
            text: 'tabla de resultados'
          }
        ]
      },
 exporterPdfFooter: {
        margin: [50,30,50,0],
        alignment: 'left',
        columns: [
          {
            fontSize: 12,
            width: 'auto',
            margin: [0,0,5,0],    
            text: 'Total de horas' 

          }
        ]
      },
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;
},
enableSorting: true,
enableRowSelection: true,
enableFullRowSelection: true,
multiSelect: true,
enableRowHeaderSelection: false,
enableColumnMenus: false,
enableFiltering: true,
// minRowsToShow: $scope.tntPortfolio.length+1,
onRegisterApi: function(gridApi){
  $scope.gridApi = gridApi;
}

};

function mal(respuesta) { console.log( "esta mal"); }

$http.get('http://localhost/CGPADINSA/Datos/traerUsuarios/', { params: {accion :"traerUsuarios"}}) .then(function bien(respuesta) { $scope.ListadoUsuarios = respuesta.data.listado; console.log(respuesta.data); }, mal);

$http.get('http://localhost/CGPADINSA/Datos/traerEspecialidades/', { params: {accion :"traerEspecialidad"}}) .then(
function bien(respuesta){ $scope.ListadoEspecialidades = respuesta.data.listado; console.log(respuesta.data); console.log( $scope.ListadoEspecialidades); }, mal);

$scope.Buscar=function(){

$scope.Acumulador= 0;

$scope.horas={};
$scope.horas.dni=$scope.dni;
$scope.horas.inicio=$scope.fechainicio.getFullYear() + '-' + ('0' + ($scope.fechainicio.getMonth() + 1)).slice(-2) + '-' +  ('0' + $scope.fechainicio.getDate()).slice(-2);
$scope.horas.hasta=$scope.fechafinal.getFullYear() + '-' + ('0' + ($scope.fechafinal.getMonth() + 1)).slice(-2) + '-' +  ('0' + $scope.fechafinal.getDate()).slice(-2);

console.log($scope.horas);

$http.post('http://localhost/CGPADINSA/Datos/ConsultaHorasPersonas/',{datos:{accion :"ConsultaHoraUsuario",horas:$scope.horas}})
.then(function(respuesta) {       
//   //aca se ejetuca si retorno sin errores      
  $scope.ListadoDeConsultas = respuesta.data;
  console.info(respuesta.data);

  for(i in $scope.ListadoDeConsultas)
  {
    for (j in $scope.ListadoEspecialidades)
    {
      if($scope.ListadoEspecialidades[j].Id == $scope.ListadoDeConsultas[i].Id)
      {
        $scope.ListadoDeConsultas[i].Id= $scope.ListadoEspecialidades[j].Especialidad;
      }
    }
    $scope.Acumulador=$scope.Acumulador+$scope.ListadoDeConsultas[i].Cantidad;  
  }
  console.log($scope.Acumulador);

  //$scope.ListadoDeConsultas.push('','Total de horas','','','',$scope.Acumulador);

      $scope.gridOptions.data =$scope.ListadoDeConsultas;
console.info($scope.gridOptions.data);

},function errorCallback(response) {
  $scope.ListadoPersonas= [];
  console.log( response);
});

}

$scope.GuardarPDF=function(){

console.log('exporting to pdf...');
// var myElement = angular.element(document.querySelectorAll(".custom-pdf-link-location"));
$scope.gridApi.exporter.pdfExport('all', 'all', '');

}

});

Sorry for my english.

Thanks

[jroboyd]

I have this issue when the margin-top is greater that 10 for the header.

[usahai]

@boydy12 I have that issue when the header margin is 15 or more: exporterPdfHeader: { text: "My Stock History", style: 'headerStyle', margin: [30, 14, 0, 0]} My header disappears when the margin goes from 14 to 15.