Generación de reporte PDF con ItextSharp en Asp.net usando un GridView

5 abril, 2011 at 4:09 (Ado.Net, Asp.Net, Reportes)

Generación de reporte PDF con ItextSharp en Asp.net usando un GridView

En esta entrada aprenderemos a generar un reporte sencillo en Pdf con la librería ItextSharp a partir de un gridview de cual exportaremos todos los datos a Pdf o solamente uno de los registros.

Este ejemplo esta hecho en Asp.net por lo cual tenemos que tener en cuenta algunos detalles que hacen a una aplicación Asp.net. Una aplicación ASP.net como cualquier aplicación para la Web no puede consumir los recursos del cliente, todos los recursos que puedan usar tienen que estar en el servidor Web. Por ese motivo el Reporte primero lo crearemos en el servidor web y luego enviaremos al cliente el archivo Pdf ya generado.

ItextSharp es una librería OpenSource la cual es original en java pero también tiene una implementación para C# es muy poderosa y sobre todo ayuda a tener reportes fáciles sin costo.

Para este ejemplo usaremos la base de datos Northwind con la tabla Employess

clip_image001

Ejecución del Sistema Terminado

clip_image003

Materiales.

· Visual Studio 2005 o Superior , Visual Web Developer Express o Sharp Develop

· Sql Server 2000 o Superior

· Librería ItextSharp

· Base de Datos Northwind

Manos a la Obra

Primero Arrastramos de la Caja de Herramientas un gridview al cual cambiamos de nombre a dgvDatos

clip_image005

Para este ejemplo seleccionamos algunos datos de la tabla Employees de la base de datos Northwind. Las filas seleccionadas son EmployeeID, LastName, FirstName, Title y Country

Select EmployeeID,LastName,FirstName,Title,Country from Employees

clip_image006

Ahora Agregamos las columnas para ver correctamente los datos, le damos clic al botón como play > y agregamos columnas personalizadas.

clip_image007

Al agregar una nueva columna nos muestra una venta de dialogo donde podemos ingresar el texto de encabezado que es el texto que se visualiza a modo de título en el gridview este puede contener espacios ya que es solo título. En cambio el campo de datos es el nombre de la columna (mejor si es el mismo nombre que el de la tabla) este no puede contener espacios en blanco.

clip_image008

Agregamos todos los datos hasta que la grilla quede con todos los datos a mostrar

clip_image009

Para Borrar las otras columnas que nos genera al principio solo cambiamos la propiedad autogenerar columnas

clip_image011

Ahora en el menú del Gridview seleccionamos editar columnas para agregar la selección.

clip_image012

Agregamos el Comand Field de Selección para que podemos seleccionar el registro de una sola fila y realizar nuestro Pdf de solo esta columna

clip_image014

Seleccionamos el Comand Fiel y editamos algunas de las propiedades para que se vea mejor al momento de la corrida. Si contamos con una imagen podemos que en vez de ver un clásico link de selección se vea con una imagen, claro está decirlo que la imagen debe ser pequeña. En mi caso use una imagen png muy pequeña que está en la carpeta images de mi sitio web.

clip_image016

También podemos jalar una imageButton para que haga de botón del pdf. El resultado final es el siguiente

clip_image018

Crearemos la función para poblar el GridView.

Creamos dos atributos de clase para la cadena de conexión y el DataTable

clip_image019

El método Cargar datos se encarga de cargar el DataTable

clip_image021

Llamamos esta función en el evento PageLoad de la página.

clip_image022

Ahora le decimos a las columnas del GridView cuál es el valor de la tabla que tiene que tomar, para hacer esto solo tenemos que editar las columnas luego en el campo DataField colocamos el nombre del campo al cual esta columnas tiene que enlazarse, como mi tabla esta creada directamente con la base de datos las columnas de la tabla tiene el mismo nombre de las columnas de la base de datos, por lo tanto tenemos que colocar a cada columna del Gridview el respectivo valor de la base de datos.

clip_image024

El resultado es el siguiente cuando todos los datos fueron enlazados la grilla queda llena.

clip_image026

Pero no queremos solo llenar la grilla también queremos que al presionar el botón de pdf genere todos los datos que contenga la grilla para esto Primero creamos una carpeta para almacenar los Pdf que se generar para posteriormente enviar este reporte al usuario.

Solo damos clic derecho al icono del Proyecto y agregamos la carpeta ReportesPdf

clip_image027

Agregamos la librería ItextSharp

clip_image028

Generamos el evento del Botón Imagen para generar el reporte global. clip_image030

Primero Creamos el método para generar el Pdf dentro del Sitio Web

clip_image032

Esta línea es muy importante para que funcione correctamente la aplicación

PdfWriter writerPdf = PdfWriter.GetInstance(documento, new FileStream(@"C:\Users\Giovanni\Documents\visual studio 2010\Projects\WebItextPdf\WebItextPdf\ReportesPdf\"+NombreReporte, FileMode.Create));

En este caso como mi aplicación está en mis Proyectos de visual Studio coloco la ruta completa, esto para que cree el pdf si nuestro proyecto está en otra ruta tenemos que colocar esa ruta. Por ejemplo (D:\MiRutaDeProyecto\ReportesPdf\) este es importante si queremos publicar nuestro sitio ya que la ruta tiene que ser la ruta donde está alojada nuestra aplicación no podemos colocar otra ruta porque la aplicación solo tiene permiso de cambiar los que está dentro del sitio y no en otro lugar.

clip_image033

Metodo para enviar al usuario el pdf que se creó y lo pueda ver

clip_image034

Resultado final

clip_image036

Ahora solo falta que cuando presionen el reporte individual salga el reporte de solo un registro básicamente es lo mismo con la diferencia que ahora envés de enviar un datatable solo enviamos una fila. Sobrecargamos el método GenerarPdf.

clip_image038

clip_image040

Generamos el evento del GridView Select Index Changed y llamamos al método generar pdf

clip_image042

Resultado final

clip_image044

Conclusiones

Generar el reporte de pdf con ItextSharp es muy fácil pero esta librería tiene más utilidades que pueden hacer un reporte más enriquecido la herramienta es una buena alternativa a otros sistemas de reporte que para tareas sencillas son muy pesadas o simplemente tendríamos que pagar una licencia de uso, como Crystal Report u otro proveedor de reportes, mientras con ItextShrap estas tareas básicas las podemos realizar muy fácil y sin coste.

Código Fuente

Carpeta del código y del Pdf del tutorial aquí

11 comentarios

  1. zonaly said,

    Esta muy bueno el ejemplo que publicaste, pero me gustaria que me proporciones un ejemplo sin gridviw talvez uno similar como este formulario web que estoy llenando…

    • Giovanni Vladimir said,

      Si necesitas mas ejemplo puedes descargar los ejemplo de Itext. ahi encuentas de mucho tipos y seguro alguno de ellos se adaptana atus necesidades

  2. mauricio said,

    Muy buen ejemplo, pero como se haria esto en Asp.NET?

    • Jonathan said,

      esto esta en asp.net

  3. Giovanni Vladimir said,

    Este ejemplo esta en ASP.NET. pudes descargar el codigo fuente y comprobarlo saludos.

  4. HENRY GUARNIZO said,

    Saludos, tengo una duda respecto a esto, quería preguntar si existe alguna manera de que el reporte que genero se lo pueda descargar como imagen.
    Agradecería mucho que alguien me orientase al respecto.

  5. daniel said,

    buen bueno tu aporte

  6. daniel said,

    Hola buena pagina no tiene ese mismo ejemplo en visaul basic .net

  7. jesus monterd said,

    he realizado la aplicación, el sólo funciona paea el primer registro de la bd, para el segundo record, se genera error del navegdor.

    “Se han recibido encabezados duplicados desde el servidor.
    La respuesta del servidor contenía encabezados duplicados. Este problema suele estar causado por la configuración incorrecta de un sitio web o de un proxy. El administrador del sitio web o del proxy es la única persona que puede solucionarla.
    Error 349 (net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION): Se han recibido varios encabezados distintos de contenido-disposición. Esto no se permite para ofrecer protección frente a ataques de división de respuesta HTTP.

  8. nspramirez said,

    funciona exelente el reporte pero al pasar la primera pagina se pierde el margen y no muestra el total de registros, como ago para q pase a otra pagina

  9. Andres said,

    tu link esta caido men

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: