domingo, 28 de septiembre de 2014

ReportViewer y Rdlc, ejemplo Factura- Eviar Imagen


El envió de imágenes a un reporte Local o remoto siempre es muy necesario, en muchas ocasiones se requieren para hacer un reporte personalizado utilizando el logo de la empresa, firma digital, etc. o simplemente para embellecer nuestros reportes “recordando que una imagen vale mal que mil palabras”

En este articulo aprovecharemos un proyecto anterior que ya tenemos creado y creo que la mayoría de ustedes ya analizo  y puso en practica los conceptos ahí mencionados para mostrar como enviar una imagen a un Local Report, si aun no tiene el proyecto anterior o tiene dudas sobre como crear un reporte local por favor antes de continuar sírvase a revisar el articulo abajo mencionado:
ReportViewer y Rdlc, ejemplo Factura (Base de datos)
Extenderemos el proyecto insertando un objeto Imagen al Report1.rdlc y enviándole un arreglo de Bytes desde el formulario principal dicho arreglo contendrá los bytes de archivo tipo *.png

Antes de comenzar a leer este articulo recuerde que: “El objetivo no es otro mas que el de orientar a los Parvulos .Net sobre como Utilizar el control Imagen de un Local Report, todo lo escrito en este articulo no es ensayado y no es revisado por nadie mas, por lo cual podría contener errores gramaticales y sintácticos, el articulo y sus conceptos no pretenden ser la verdad absoluta del tema, siéntase en confianza de dejar sus comentarios y opiniones en la sección de comentarios al final del mismo y si lo considera prudente envíeme un correo electrónico por medio del formulario de contacto y por ultimo si el articulo le es de utilidad por favor considere dejar un comentario de agradecimiento.

Requisitos: Visual Studio 2012, Framework 4.0

1. Para empezar, descargue el proyecto ofrecido en el articulo anterior, ábralo utilizando Vs2012, espere a que termine la conversión del código.

2. Abra el formulario principal llamado Form1
image

3. Cree el siguiente diseño utilizando un PictureBox y un Botón (recuerde que el objetivo del articulo es mostrar como se envía un objeto imagen a un Local Report así que ignore mi escaso sentido del diseño), nombre a los controles como pctboxLogo y btnSeleccionar respectivamente.
image

4. En las propiedades del objeto PictureBox, seleccione StretchImage para que la imagen que seleccione se autoajuste al tamaño de nuestro control.
image

5. Haga doble clic sobre el botón que acabamos de crear a fin de generar la estructura de código del evento Click, dentro coloque las siguientes líneas de código:

private void btnSeleccionar_Click(object sender, EventArgs e)
{
    //
    //Utilizaremos el la clase OpenFileDialog para seleccionar una imagen
    OpenFileDialog fileDialog = new OpenFileDialog();
    //
    //Definimos los filtros necesarios para evitar ver archivos que no corresponden a archivo de imagen
    fileDialog.Filter = "Archivo JPG (*.jpg)|*.jpg| Archivo PNG (*.png)|*.png| Archivo BMP (*.bmp)|*bmp";

    if (fileDialog.ShowDialog() == DialogResult.OK)
    {
        //
        //Cargamos nuestro control PictureBox con el archivo de imagen seleccionado
        pctboxLogo.Image = Image.FromFile(fileDialog.FileName);
    }

Probemos estas líneas de código:
image

Puesto que pudimos cargar una imagen a nuestro PictureBox el código anterior funciona. Continuemos…

Para poder enviar nuestro arreglo de Bytes al Local Report necesitamos crear una nueva propiedad que será la encargada de transportar los Bytes, como el Logo forma parte del Header de la factura, usaremos la clase EFactura, para esto.

6. Desde el “Explorador de Soluciones” haga doble clic sobre la clase EFactura y cree una nueva propiedad llamada Logo la cual será de tipo Bytes[] con acceso publico:

using System;using System.Collections.Generic;
namespace ReportViewerInvoiceReport_CSharp
{
    public class EFactura
    {
        public int Numero { get; set; }
        public string Nombre { get; set; }
        public string Rfc { get; set; }
        public string Direccion { get; set; }
        public decimal Subtotal { get; set; }
        public decimal Iva { get; set; }
        public decimal Total { get; set; }
        public DateTime FechaFacturacion { get; set; }
        //
        //Propiedad con acceso publico del tipo Byte, será el encargado de transportar los bytes de nuestro imagen
        public Byte[] Logo { get; set; }

        //Creamos una lista con una nueva Instancia de la clase Articulo
        //esta lista contendra el detalle de la factura
        public List<EArticulo> Detail = new List<EArticulo>();
    }
}

7. Ahora vayamos a configurar nuestro Local Report para recibir esta imagen como parte de los datos que debe de mostrar, para ello, desde el Explorador de Soluciones abra el reporte llamado Report1.rdlc haciendo doble clic sobre el:
image

Tendremos que modificar un poco nuestro  diseño a fin de darle espacio en el Header al control Imagen, que será el encargado de mostrar la imagen que fungirá como logo de la empresa.

8. Modifique el diseño arrastrando los controles hacia abajo hasta que considere prudente.
image

Antes de continuar con nuestro diseño tenemos que actualizar nuestro origen de datos a fin de tener acceso a la propiedad Logo de nuestra clase EFactura, pero antes de eso observe que la propiedad agregada pasos anteriores aun no esta visible y por lo tanto no esta disponible para ser utilizado en nuestro reporte:
image

image

y por mas que hagamos Clic derecho Actualizar no veremos jamás esta propiedad hasta que no hagamos una nueva compilación de nuestro proyecto, así que:

10. Diríjase a la barra de Menús –> Compilar –> Compilar Solución
image

11. Observe como después de la compilación en el cuadro de Origen de Datos podemos visualizar una nueva propiedad llamada Logo:
image

12. Diríjase al cuadro “Datos del informe”- > clic derecho sobre el origen “Encabezado” –> Actualizar y observe que nuestra propiedad se hace presente en este origen de datos.
image

Ahora que tenemos nuestra nueva propiedad como parte del origen de datos de nuestro informe podemos utilizarlo para asignárselo al objeto Imagen.

13. Desde el cuadro de herramientas ubique el control Imagen y arrástrelo al Header de nuestro local report.
image

14. Automáticamente veremos el cuadro de dialogo “Propiedades de la imagen”, ubique la opción “Seleccionar el origen de la imagen” y seleccione “Base de datos”, ubique la opción “Usar este campo:” y seleccione “=First(Fields!Logo.Value, "Encabezado")”, ubique la opción “Usar este tipo MIME:” y seleccione “image/png” (esta ultima opción lo dejo a su consideración no necesariamente tiene que ser este tipo de imagen)
image

15. Haga clic en “Aceptar” y observe como nuestro nuevo control fue agregado al Header de nuestro Local Report, juegue un poco con  el tamaño.
image

Para continuar vayamos a nuestro Form1 a terminar de configurar el envió del arreglo de bytes

16. En la parte superior de nuestra estructura de código, cree el siguiente método que nos ayudara a la transformación de nuestra imagen en un arreglo de bytes.

private byte[] GetBytes(Image imageIn)
{
    //
    //Usamos la clase MemoryStream para contener los bytes que compone la imagen
    MemoryStream ms = new MemoryStream();
    imageIn.Save(ms, ImageFormat.Png);
    //
    //Retornamos el arreglo de bytes
    return ms.ToArray();
}

17. Ubique el método InvoiceGenerate() y agregue las siguiente líneas de código:
//
// Usamos la Función GetBytes() para convertir la imagen cargada al PicureBox en un arreglo de Bytes para establecérselo a nuestra propiedad Logo_factura.Logo = GetBytes(pctboxLogo.Image);

Después de haber realizado todo lo anterior solo nos resta probar nuestra aplicación.

Ejecute la aplicación presionado la tecla “F5” o desde el menú presione el botón “Iniciar”
image

En el campo “Numero” ingrese cualquier valor del 1 al 5 y presione “Enter”
image

Haga Clic sobre el botón “…” para seleccionar una imagen (yo escogeré una imagen del tipo png)
image

Observe como nuestro PictureBox muestra la imagen seleccionada:
image

Presione el botón “Imprimir” y observe como nuestra imagen es mostrada en nuestro Local Report
image
image

Repita esta operación con tantas imágenes guste…

Por ultimo recuerde que el origen de la imagen podrías ser un arreglo de bytes almacenado en un campo de una base datos, el resultado siempre será el mismo ya que al Local Report no le interesa ni necesita saber el origen de la imagen siempre y cuando esta venga como un arreglo de Bytes

Escribir este articulo me llevo mas de 3 horas, dejar un comentario de agradecimiento le tomara 5 minutos.

Saludos desde Monterrey, Nuevo León México!

Ejemplo C#
Ejemplo Vb.Net


Nota: Al momento de migrar la aplicación de Vs2010 a Vs2012 recibí este mensaje de advertencia

Advertencia    1    El proyecto hace referencia a una versión anterior de SQL Server Compact que no tiene compatibilidad con el diseñador en la versión actual de Visual Studio. Para continuar sin compatibilidad con el diseñador, descargue SQL Server Compact 3.5 del centro de descarga de Microsoft (http://go.microsoft.com/fwlink/?LinkId=229598). Para actualizar los activos a SQL Server Compact 4.0 y habilitar la compatibilidad con el diseñador, abra el proyecto y use el cuadro de diálogo Agregar conexión para crear una conexión a la base de datos. ReportViewerInvoiceReport-CSharp”

No tuve la necesidad de realizar absolutamente nada para poder trabajar con el proyecto de ejemplo pero si usted lo desea podría actualizar la base de datos a la versión 4.0, el script para crear las estructuras de las tablas la podrá descargar en el link proporcionado en el proyecto anterior.

36 comentarios:

  1. Excelente aporte, me sirvio mucho.....gracias.

    ResponderEliminar
  2. Respuestas
    1. Hola David:

      Que bueno que el articulo haya sido de utilidad.

      Saludos

      Eliminar
  3. Buen dia quien pudo descargar los ejemplo, yo requiero hacer algo muy parecido quien lo tengo por favor enviemelo a la siguiente direccion yexon19@gmail.com

    ResponderEliminar
  4. amigo no se puede descargar necesito mas detalles como jalaste los datos del textbox del formulario hacia el reporte si alguien lo tiene me lo puede pasar porfavor mi correo miguelzux@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola Miguel:

      En la introducción del articulo menciono que este es la continuación de dos post anteriores en donde se explicaron esa misma duda que tu tienes o tenias, por favor si aun continuas con ella, revisa estos dos artículos para que logres armar tu reporte.

      Saludos

      Eliminar
    2. Amigo, como puedo hacer para que pueda agregar varias imágenes de mi elección, así como una lista de 30 imágenes y quiero imprimir solo algunas de ellas, irlas agregando al reporte una a una.

      Eliminar
    3. Amigo, como puedo hacer para que pueda agregar varias imágenes de mi elección, así como una lista de 30 imágenes y quiero imprimir solo algunas de ellas, irlas agregando al reporte una a una.

      Eliminar
  5. Hola José Luis, muchas gracias por el aporte, es de gran ayuda. Te quería consultar como podría agregar una imagen de fondo en la parte donde se muestran los detalles, en el body del reporte de manera que quede centrada y de un tamaña fijo, sería como una marca de agua, porque lo estoy haciendo seteando la propiedad BackgroundImage del body pero resulta que no me queda centrada y me corta la imagen. Muchas gracias de vuelta!

    ResponderEliminar
  6. Respuestas
    1. Hola José:

      Exactamente igual como lo he explicado en el articulo, la sintaxis del código cambiara un poco como el uso de los corchetes, terminaciones con punto y coma en las lineas de código pero, todo lo demás es igual, al final del articulo les pongo un link con el proyecto de ejemplo, avísame si es que no puedes descargarlo.

      Saludos
      J . Luis

      Eliminar
    2. Hola, me gustaría descargar el ejemplo en VB, pero no me deja descargarlo me podrías ayudar mandandolo a este correo "cabc940224hynnnr02@hotmail.com"

      Eliminar
  7. Amigo, no puedo descargar tu código de ejemplo, agradecería tu ayuda y de antemano muchas gracias

    ResponderEliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  9. Excelnete aporte gracias... favor ayudeme con el codigo fuente al correo: soportecni@hotmail.com.... gracias por su gentil ayuda

    ResponderEliminar
  10. Muy buen aporte, podrias enviarme el proyecto VB.NET al correo "aligvzzsoft@gmail.com", muchisimas gracias.

    ResponderEliminar
  11. Muy buen aporte, podrias enviarme el proyecto VB.NET al correo "aligvzzsoft@gmail.com", muchisimas gracias.

    ResponderEliminar
  12. Hola Ignacio.

    Trate de enviarte el proyecto a tu cuenta de correo, pero por alguna razon siempre me lo regresa.

    Trata de descargarlo de este Link:

    http://1drv.ms/1KaYK4F

    si llegas a tener algun problema por favor deja un comentario o enviame un correo.

    Saludos

    ResponderEliminar
  13. se te agradeceria si me puedes enviar en proyecto pero en C#, enmanprogra@gmail.com.

    ResponderEliminar
  14. Gracias por compartir tus conocimientos. Me resultaron muy útiles. Saludos.

    ResponderEliminar
  15. se te agradeceria si me puedes enviar en proyecto pero en VB lsandovalramos@hotmail.com,

    ResponderEliminar
  16. Gran Post Gracias !! una consulta el enlace de oneDrive del ejemplo de vb ya no funciona si seria tan amable de resubirlo para poder descargarlo.

    ResponderEliminar
  17. al colocar en el metodo invoiceGenerate() me sale este error
    Error 1 Un valor de tipo '1-matriz dimensional de Byte' no se puede convertir en 'Byte'.

    ResponderEliminar
  18. Mi amigo, como puedo hacer para agregar varias imágenes a reportviewer de una en una, imagina que tienes 100 imágenes y de estas tienes que imprimir 10, como las puedo agregar de una en una?

    ResponderEliminar
  19. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  20. hola aguien tiene el codigo de este proyecto,me parece muy bueno pero no logro hacerlo funcionar.

    ResponderEliminar
  21. alguien tiene el proyecto que me pudiera pasar porfa.

    ResponderEliminar
    Respuestas
    1. Hola:
      Claro que seguimos pendientes del blog, por favor revisa el siguiente link y descarga los ejemplos que requieras:

      https://1drv.ms/f/s!AiQ176xmckvhgT91In4-j9jobQbW

      Saludos

      Eliminar
  22. saludos , me podrias orientar de como debo actualizar las lineas de detalle de las facturas

    ResponderEliminar
    Respuestas
    1. Hola: Eres el que pregunto en el foro de Vb.Net?

      https://social.msdn.microsoft.com/Forums/es-ES/3d941186-d1ee-4a77-8a34-c99ef6cefc78/actualizar-una-factura-generada-previamente?forum=vbes

      Si es asi, acabo de responderte alla.

      Eliminar
  23. Hola, para felicitarte por tus artículos. Me han servido los tres a los que he acudido para generar reportes. Gracias.

    ResponderEliminar
  24. Podrías poner un vídeo de como crear Report1.rdlc porque no se como hacerlo sobre todo con poner títulos dentro de reportviewer
    Gracias.

    ResponderEliminar
  25. Hola! algun link correcto para descargar el ejemplo, los link q estan no son utilies, me interesa el ejemplo vb.net . ayuda!

    ResponderEliminar
  26. Hey! estará disponible aun el archivo? jajaja llegue tarde 2024. si es posible me podrías pasar a mi correo: ismaelp97m9@gmail.com me sería de gran utilidad

    ResponderEliminar

Deja un comentario si el articulo fue de utilidad.