Softbyte.HtmlTableGenerator Wiki

Brought to you by: julianomenzen

Home

Labels: html table report pdf (1)

Softbyte.HtmlTableGenerator

This is a C# framework developed in Softbyte company to aid in the generation of HTML tables.

This framework aims to generate HTML tables, allowing the content created is subsequently used for any purpose that involves HTML. Send emails, generate pdf reports ..

The motivation for creating this framework was the high cost to purchase tools that would enable the generation of PDF reports. Because of this, it was decided to generate html tables and then perform the conversion to a document.

Reports

Initially this framework is designed to work with the AbcPdf component so that the Softbyte.HtmlTableGenerator performs the conversion of the C# code structure for HTML and the component ABCpdf performed the HTML conversion to a .PDF report.

If you choose not to use the ABCpdf in generating reports, below we leave some suggestions:
HiQPdf - https://hiqpdf.codeplex.com/
SelectPdf Community Edition (FREE) - https://code.msdn.microsoft.com/Convert-from-HTML-to-PDF-09ce2a1d
WKHtmlTopdf - http://wkhtmltopdf.org/index.html
HTML Renderer - https://htmlrenderer.codeplex.com/

Nuget

Yeah! This framework is in Nuget!

Structure

The framework is divided into two parts:

The classes representing the HTML elements;
The class responsible for generating HTML content.

Following the idea of HTML structure, there are the classes representing the HTML elements:

<table>
    <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th> 
    </tr>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>Mayer</td> 
    </tr>
    <tr>
        <td>2</td>
        <td>Eric</td>
        <td>Clapton</td> 
    </tr>
</table>

Class	HTML Element
ElementoTabela	`<table>`
ElementoLinha	`<tr>`
ElementoCelula	`<td>`

Each element has the property "Atributos." This property allows it to be implemented any HTML property in the elements. "Id", "name", "class", "style", "colspan", "rowspan", ...

Creating a structure

ElementoTabela table = new ElementoTabela();
table.Atributos.Adicionar("style", "border-collapse:collapse; border-spacing:0; width:100%;");

ElementoLinha header = new ElementoLinha();
header.Atributos.Adicionar("style", "background-color:#4CAF50; color:white;");
header.ListaCelula.Add(new ElementoCelula()
{
    Valor = "First Name",
});

header.ListaCelula.Add(new ElementoCelula()
{
    Valor = "Last Name"
});

header.ListaCelula.Add(new ElementoCelula()
{
    Valor = "Savings"
});

table.LinhaCabecalho = header;

List<ElementoLinha> tableLines = new List<ElementoLinha>();

AtributosElemento propertyFirstname = new AtributosElemento();
propertyFirstname.Adicionar("style", "font-weight:bold");

int i = 0;
foreach (User user in users)
{
    ElementoLinha lineTr = new ElementoLinha();

    if ((i % 2) == 0)
    {
        lineTr.Atributos.Adicionar("style", "background-color:#f2f2f2");
    }
    i++;

    ElementoCelula tdFirstname = new ElementoCelula()
    {
        Valor = user.Firstname,
        Atributos = propertyFirstname
    };

    ElementoCelula tdLastname = new ElementoCelula()
    {
        Valor = user.Lastname
    };

    ElementoCelula tdSavings = new ElementoCelula()
    {
        Valor = user.Savings
    };

    tdSavings.Atributos.Adicionar("style", "color:" + ((user.Savings >= 100) ? "green" : "red"));
    tdSavings.Atributos.Adicionar("align", "right");

    lineTr.ListaCelula.Add(tdFirstname);
    lineTr.ListaCelula.Add(tdLastname);
    lineTr.ListaCelula.Add(tdSavings);

    table.ListaLinha.Add(lineTr);
}

GeradorTabelaHtml geradorTabelaHtml = new GeradorTabelaHtml();

return geradorTabelaHtml.Criar(table);

<!--Return-->
<table  style='border-collapse:collapse; border-spacing:0; width:100%;' >
    <tr  style='background-color:#4CAF50; color:white;' >
        <th >First Name</th>
        <th >Last Name</th>
        <th >Savings</th>
    </tr>
        <tr  style='background-color:#f2f2f2' >
        <td style='font-weight:bold' >Peter</td>
        <td >Griffin</td>
        <td style='color:red' align='right' >10</td>
    </tr>
    <tr  >
        <td style='font-weight:bold' >Lois</td>
        <td >Griffin</td>
        <td style='color:green' align='right' >150</td>
    </tr>
    <tr  style='background-color:#f2f2f2' >
        <td style='font-weight:bold' >Joe</td>
        <td >Swanson</td>
        <td style='color:green' align='right' >300</td>
    </tr>
    <tr  >
        <td style='font-weight:bold' >Cleveland</td>
        <td >Brown</td>
        <td style='color:red' align='right' >25</td>
    </tr>
</table>

First Table

Creating a structure `<html>`

In addition to the basic elements of a table structure, there is the implementation of another class where you can inform css classes to be used in the <style> tag.

<html>
    <head>
        <style type='text/css'>[...]</style>
    <head>
    <body>
        <table>[...]</table>
    <body>
</html>

ElementoHTMLTabela htmlElement = new ElementoHTMLTabela();
htmlElement.ClassesCSS.Adicionar(".customTable", "border-collapse:collapse; border-spacing:0; width:100%;"); // Custom class for table
htmlElement.ClassesCSS.Adicionar("th", "background-color:#4CAF50; color:white;"); // Header
htmlElement.ClassesCSS.Adicionar("tr:nth-child(even)", "background-color: #f2f2f2"); // Striped table
htmlElement.ClassesCSS.Adicionar("td:first-child", "font-weight: bold"); // First Name in bold
htmlElement.ClassesCSS.Adicionar("td:last-child", "text-align: right"); // Savings aligned right

ElementoTabela table = new ElementoTabela();
table.Atributos.Adicionar("class", "customTable");

ElementoLinha header = new ElementoLinha();

header.ListaCelula.Add(new ElementoCelula()
{
    Valor = "First Name",
});

header.ListaCelula.Add(new ElementoCelula()
{
    Valor = "Last Name"
});

header.ListaCelula.Add(new ElementoCelula()
{
    Valor = "Savings"
});

table.LinhaCabecalho = header;          

foreach (User user in users)
{
    ElementoLinha lineTr = new ElementoLinha();

    ElementoCelula tdFirstname = new ElementoCelula()
    {
        Valor = user.Firstname
    };

    ElementoCelula tdLastname = new ElementoCelula()
    {
        Valor = user.Lastname
    };

    ElementoCelula tdSavings = new ElementoCelula()
    {
        Valor = user.Savings
    };

    tdSavings.Atributos.Adicionar("style", "color:" + ((user.Savings >= 100) ? "green" : "red"));

    lineTr.ListaCelula.Add(tdFirstname);
    lineTr.ListaCelula.Add(tdLastname);
    lineTr.ListaCelula.Add(tdSavings);

    table.ListaLinha.Add(lineTr);
}

htmlElement.Tabela = table;

GeradorTabelaHtml geradorTabelaHtml = new GeradorTabelaHtml();

return geradorTabelaHtml.Criar(htmlElement);

<!--Return-->
<html  >
    <head>
        <style type='text/css'>
            .customTable {
                border-collapse:collapse;
                border-spacing:0;
                width:100%;
            } 
            th {
                background-color:#4CAF50; color:white;
            } 
            tr:nth-child(even) {
                background-color: #f2f2f2
            }
            td:first-child {
                font-weight: bold
            } 
            td:last-child {
                text-align: right
            }  
        </style>
    </head>
    <body>
        <table  class='customTable' >
            <tr  >
                <th >First Name</th>
                <th >Last Name</th>
                <th >Savings</th>
            </tr>
            <tr  >
                <td >Peter</td>
                <td >Griffin</td>
                <td style='color:red' >10</td>
            </tr>
            <tr  >
                <td >Lois</td>
                <td >Griffin</td>
                <td style='color:green' >150</td>
            </tr>
            <tr  >
                <td >Joe</td>
                <td >Swanson</td>
                <td style='color:green' >300</td>
            </tr>
            <tr  >
                <td >Cleveland</td>
                <td >Brown</td>
                <td style='color:red' >25</td>
            </tr>
        </table>
    </body>
</html>

Second Table

HTML attributes

`<td>`

ElementoCelula tdElement = new ElementoCelula();
tdElement.Atributos.Adicionar("id", "lineOne", [bool SubscribePropertyIfExists = true]); // If the property already exists, the value should be overridden?
tdElement.Atributos.Adicionar("style", "border: 1px solid black");
tdElement.Atributos.Adicionar("align", "right");

// "Value" is an object, and therefore accepts any data type
cel.Valor = string.Empty;
//or
cel.Valor = decimal.MaxValue;
//or
cel.Valor = double.MinValue;

`<tr>`

ElementoLinha trElement = new ElementoLinha();
trElement.Atributos.Adicionar("align", "right");
trElement.Atributos.Adicionar("valign", "middle");

`<table>`

ElementoTabela tableElement = new ElementoTabela();
tableElement.Atributos.Adicionar("border", 1);
tableElement.Atributos.Adicionar("style ", "width:100%");

`<html>`

ElementoHTMLTabela htmlElement = new ElementoHTMLTabela();
htmlElement.ClassesCSS.Adicionar(".customTable", "border-collapse:collapse; border-spacing:0; width:100%;"); // Custom Class for table
htmlElement.ClassesCSS.Adicionar("th", "background-color:#4CAF50; color:white;"); // Header
htmlElement.ClassesCSS.Adicionar("tr:nth-child(even)", "background-color: #f2f2f2"); // Striped table
htmlElement.ClassesCSS.Adicionar("td:first-child", "font-weight: bold"); // First Name in bold
htmlElement.ClassesCSS.Adicionar("td:last-child", "text-align: right"); // Savings aligned right

Pendencies

Methods translate to English;
Allow the geradorTabelaHtml.Criar() render multiple tables at the same time;
Correct implementation of exceptions.