locked
Converting HTML Panel to PDF RRS feed

  • Question

  • User-1994446809 posted

    Hello forum,

    I am trying to learn how to convert an HTML panel to PDF. Initially, I had converted HTML to PDF but I found out that the iTextSharp I used did not recognize CSS style. After searching the internet for solution, I discovered that a new iText (iText7) supports CSS, so I installed the new iText7 in my test project and found this code online too. I applied the code but it did not work. Please I seek help to resolve this and convert HTML panel to PDF. I really don't know how to do it, can anyone help me please?

    Here is my HTML and Code behind

    <asp:Panel ID="Panel1" runat="server">
                                <div class="parent" style="margin-left: auto;margin-right: auto;padding: 10px;display: flex;background-color: #ffffff; border: 1px solid #ccc;width: 100%;">
                                    <div class="child" id="midcont" style="width: 100%;height: auto;padding: .5rem;">
                                        <div style="background-color: #DCDFE6; height: 4%;">
                                            <center>
                                        <div class="heading" style="font-size:11pt;font-weight:bolder;;margin-top: 0%;">
                                      <asp:Label ID="Label4" runat="server" Font-Bold="true" Font-Size="11pt" ForeColor="#000066" Text="INVOICE"></asp:Label>
                                    </div>
                                    </center>
                                        </div><hr />
                                       <div>
                                        <asp:Label ID="Label3" runat="server" Text="Invoice N°:" Font-Size="10pt" Font-Bold="true"></asp:Label>&nbsp;<asp:Label ID="lblprefix" runat="server" font-size="9pt" Text="4107750829"></asp:Label>
                                    </div>
                                        <div class="company-address" style="border: 0px solid #ccc;float: left;width: 250pt;font-size:9pt;">
                                            <p style="font-size:7pt;">FROM:</p>
                                            <div>
                                                <asp:Label ID="Label2" runat="server" Font-Bold="true" Text="Name"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="Lblname" runat="server" Font-Size="8pt" Text="Sending Company"></asp:Label></div>
    
                                            <div>
                                                <asp:Label ID="Label8" runat="server" Font-Bold="true" Text="Address"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="Lbladdress" runat="server" Text="12 Wellington Way"></asp:Label></div>
    
                                            <div>
                                                <asp:Label ID="Label10" runat="server" Font-Bold="true" Text="Email"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="Lblmail" runat="server" Text="Sender@gmail.com"></asp:Label></div>
    
                                            <div>
                                                <asp:Label ID="Label11" runat="server" Font-Bold="true" Text="Phone N°"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="Lblphone" runat="server" Text="08127670224"></asp:Label></div>
                                            <br />
                                            <div>
                                                <asp:Label ID="Label16" runat="server" Font-Bold="true" Font-Size="8pt" Text="Date"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="datLbl" runat="server" Text="25-Sep-2020"></asp:Label></div>
                                        </div>
                                        <br />
                                        <br />
                                        <div class="invoice-details" style="border: 0px solid #ccc;float: right;width: 250px;margin-right: 10px;font-size:9pt;">
                                            <p style="font-size: 7pt;">TO:</p>
                                            <div>
                                                <asp:Label ID="Label7" runat="server" Font-Bold="true" Font-Size="8pt" Text="Name"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="nameLbl" runat="server" Text="Recieving Company/Person"></asp:Label></div>
    
                                            <div>
                                                <asp:Label ID="Label9" runat="server" Font-Bold="true" Font-Size="8pt" Text="Address"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="addressLbl" runat="server" Text="3 Sydney Val Street"></asp:Label></div>
    
                                            <div>
                                                <asp:Label ID="Label12" runat="server" Font-Bold="true" Font-Size="8pt" Text="Email"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="mailLbl" runat="server" Text="reciever@gmail.com"></asp:Label></div>
    
                                            <div>
                                                <asp:Label ID="Label13" runat="server" Font-Bold="true" Font-Size="8pt" Text="Phone N°"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="phoneLbl" runat="server" Text="09087434116"></asp:Label></div>
                                            <br />
                                            <div>
                                                <asp:Label ID="Label15" runat="server" Font-Bold="true" Font-Size="8pt" Text="Due Date"></asp:Label></div>
                                            <div>
                                                <asp:Label ID="dateLbl" runat="server" type="date" Text="01-Oct-2020"></asp:Label></div>
                                        </div>
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                        <asp:GridView ID="Gridview1" runat="server" Font-Size="10pt" AutoGenerateColumns="False" Style="max-width: 100%" RowStyle-Height="40px" HeaderStyle-ForeColor="#00003D"
                                            BorderStyle="None" GridLines="None" Height="50px" HeaderStyle-Height="28px" HeaderStyle-BackColor="#D3D9E5">
                                            <Columns>
                                                <asp:BoundField DataField="Item" HeaderText="ITEM DESCRIPTION" ItemStyle-Width="70%" />
                                                <asp:BoundField DataField="Qty" HeaderText="QUANTITY" ItemStyle-Width="15%" />
                                                <asp:BoundField DataField="Rate" HeaderText="RATE" ItemStyle-Width="19%" />
                                                <asp:BoundField DataField="Amount" HeaderText="AMOUNT" ItemStyle-Width="20%" />
                                            </Columns>
                                            <HeaderStyle Height="25px" />
                                        </asp:GridView>
                                        <hr />
                                        <br />
                                        <div class="pict" style="float: left;margin-left: 5%;margin-bottom: 3%;">
                                            <asp:Image ID="Image1" runat="server" ImageUrl="http://localhost:49893/images/qr_code_red.png" Width="80px" Height="80px" />
                                        </div>
    
                                        <div class="total" style="float: right;width: 240px;font-size: 9pt;">
                                            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="TOTAL:"></asp:Label>
                                            <asp:Label ID="Label17" runat="server" Text="NGN"></asp:Label>&nbsp;<asp:Label ID="lblTotal" runat="server" Font-Size="9pt" Text="3000"></asp:Label>
                                            <br />
                                            <br />
                                            <asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>&nbsp;&nbsp;
                                        <asp:Label ID="vatlbl" runat="server" Font-Size="9pt" Text="5"></asp:Label>
                                            <br />
                                            <br />
                                            <div style="background-color: #D3D9E5; height: 30px; width: 100%;">
                                                <asp:Label ID="Label6" runat="server" Font-Bold="true" Text="GRAND TOTAL:"></asp:Label>
                                                <asp:Label ID="Label18" runat="server" Text="NGN"></asp:Label>&nbsp;<asp:Label ID="lblGrandTotal" runat="server"  font-size="9pt" Text="3150"></asp:Label>
                                            </div>
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                        </div>
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                    </div>
                                    <br />
                                    <br />
                                </div>
                            </asp:Panel>
                            <br />
                            <div>
                                <asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" Font-Size="Small" BackColor="SteelBlue" Text="Send to Mail" OnClick="Button2_Click" />
                            </div>
    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.IO;
    using System.Data;
    using System.Net.Mail;
    using System.Collections;
    using System.Configuration;
    using System.Linq;
    using System.Web.Security;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    using System.Diagnostics;
    using MessagingToolkit.QRCode.Codec.Data;
    using MessagingToolkit.QRCode.Codec;
    using System.Drawing;
    using System.Drawing.Imaging;
    using System.Collections.Specialized;
    using System.Text;
    using System.Data.SqlClient;
    using System.Collections.Generic;
    using iText.Layout;
    using iText.Html2pdf;
    using iText.Kernel.Geom;
    using iText.Kernel.Pdf;
    
     public void generatePDF(String htmlFile)
        {
            try
            {
                //HTML String
                String htmlString = htmlFile;
                //Setting destination 
                FileOutputStream fileOutputStream = new FileOutputStream(new File(dirPath + "/USER-16-PF-Report.pdf"));
    
                PdfWriter pdfWriter = new PdfWriter(fileOutputStream);
                ConverterProperties converterProperties = new ConverterProperties();
                PdfDocument pdfDocument = new PdfDocument(pdfWriter);
    
                //For setting the PAGE SIZE
                pdfDocument.SetDefaultPageSize(new PageSize(PageSize.A3));
                
                Document document = HtmlConverter.ConvertToDocument(htmlFile, pdfDocument, converterProperties);
                document.Close();
            }
            catch (Exception e)
            {
                e.printStackTrace();
            }
        }
     protected void Button2_Click(object sender, EventArgs e)
        {
            generatePDF();
        }

    Monday, September 28, 2020 1:02 PM

Answers

  • User-1330468790 posted

    Hi georgeakpan233,

     

    I understand that you want to save the panel content to a PDF. However, I am not sure whether you want to

    a) pass it back the browser and let the user save it

    b) render another html and send the pdf file as an attachment? 

     

    From the simplest aspect, you could refer to below code to see how to save the content of the panel control and pass it back to user side. Of course, the pdf file will be created with the css style.

    aspx (exactly the same with yours however images will not be rendered): 

    <form id="form1" runat="server">
            <asp:Panel ID="Panel1" runat="server">
                <div class="parent" style="margin-left: auto; margin-right: auto; padding: 10px; display: flex; background-color: #ffffff; border: 1px solid #ccc; width: 100%;">
                    <div class="child" id="midcont" style="width: 100%; height: auto; padding: .5rem;">
                        <div style="background-color: #DCDFE6; height: 4%;">
                            <center>
                                        <div class="heading" style="font-size:11pt;font-weight:bolder;;margin-top: 0%;">
                                      <asp:Label ID="Label4" runat="server" Font-Bold="true" Font-Size="11pt" ForeColor="#000066" Text="INVOICE"></asp:Label>
                                    </div>
                                    </center>
                        </div>
                        <hr />
                        <div>
                            <asp:Label ID="Label3" runat="server" Text="Invoice N°:" Font-Size="10pt" Font-Bold="true"></asp:Label>&nbsp;<asp:Label ID="lblprefix" runat="server" Font-Size="9pt" Text="4107750829"></asp:Label>
                        </div>
                        <div class="company-address" style="border: 0px solid #ccc; float: left; width: 250pt; font-size: 9pt;">
                            <p style="font-size: 7pt;">FROM:</p>
                            <div>
                                <asp:Label ID="Label2" runat="server" Font-Bold="true" Text="Name"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lblname" runat="server" Font-Size="8pt" Text="Sending Company"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label8" runat="server" Font-Bold="true" Text="Address"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lbladdress" runat="server" Text="12 Wellington Way"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label10" runat="server" Font-Bold="true" Text="Email"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lblmail" runat="server" Text="Sender@gmail.com"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label11" runat="server" Font-Bold="true" Text="Phone N°"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lblphone" runat="server" Text="08127670224"></asp:Label>
                            </div>
                            <br />
                            <div>
                                <asp:Label ID="Label16" runat="server" Font-Bold="true" Font-Size="8pt" Text="Date"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="datLbl" runat="server" Text="25-Sep-2020"></asp:Label>
                            </div>
                        </div>
                        <br />
                        <br />
                        <div class="invoice-details" style="border: 0px solid #ccc; float: right; width: 250px; margin-right: 10px; font-size: 9pt;">
                            <p style="font-size: 7pt;">TO:</p>
                            <div>
                                <asp:Label ID="Label7" runat="server" Font-Bold="true" Font-Size="8pt" Text="Name"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="nameLbl" runat="server" Text="Recieving Company/Person"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label9" runat="server" Font-Bold="true" Font-Size="8pt" Text="Address"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="addressLbl" runat="server" Text="3 Sydney Val Street"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label12" runat="server" Font-Bold="true" Font-Size="8pt" Text="Email"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="mailLbl" runat="server" Text="reciever@gmail.com"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label13" runat="server" Font-Bold="true" Font-Size="8pt" Text="Phone N°"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="phoneLbl" runat="server" Text="09087434116"></asp:Label>
                            </div>
                            <br />
                            <div>
                                <asp:Label ID="Label15" runat="server" Font-Bold="true" Font-Size="8pt" Text="Due Date"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="dateLbl" runat="server" type="date" Text="01-Oct-2020"></asp:Label>
                            </div>
                        </div>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <asp:GridView ID="Gridview1" runat="server" Font-Size="10pt" AutoGenerateColumns="False" Style="max-width: 100%" RowStyle-Height="40px" HeaderStyle-ForeColor="#00003D"
                            BorderStyle="None" GridLines="None" Height="50px" HeaderStyle-Height="28px" HeaderStyle-BackColor="#D3D9E5">
                            <Columns>
                                <asp:BoundField DataField="Item" HeaderText="ITEM DESCRIPTION" ItemStyle-Width="70%" />
                                <asp:BoundField DataField="Qty" HeaderText="QUANTITY" ItemStyle-Width="15%" />
                                <asp:BoundField DataField="Rate" HeaderText="RATE" ItemStyle-Width="19%" />
                                <asp:BoundField DataField="Amount" HeaderText="AMOUNT" ItemStyle-Width="20%" />
                            </Columns>
                            <HeaderStyle Height="25px" />
                        </asp:GridView>
                        <hr />
                        <br />
                        <div class="pict" style="float: left; margin-left: 5%; margin-bottom: 3%;">
                            <asp:Image ID="Image1" runat="server" ImageUrl="http://localhost:49893/images/qr_code_red.png" Width="80px" Height="80px" />
                        </div>
    
                        <div class="total" style="float: right; width: 240px; font-size: 9pt;">
                            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="TOTAL:"></asp:Label>
                            <asp:Label ID="Label17" runat="server" Text="NGN"></asp:Label>&nbsp;<asp:Label ID="lblTotal" runat="server" Font-Size="9pt" Text="3000"></asp:Label>
                            <br />
                            <br />
                            <asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>&nbsp;&nbsp;
                                        <asp:Label ID="vatlbl" runat="server" Font-Size="9pt" Text="5"></asp:Label>
                            <br />
                            <br />
                            <div style="background-color: #D3D9E5; height: 30px; width: 100%;">
                                <asp:Label ID="Label6" runat="server" Font-Bold="true" Text="GRAND TOTAL:"></asp:Label>
                                <asp:Label ID="Label18" runat="server" Text="NGN"></asp:Label>&nbsp;<asp:Label ID="lblGrandTotal" runat="server" Font-Size="9pt" Text="3150"></asp:Label>
                            </div>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </div>
                        <br />
                        <br />
                        <br />
                        <br />
                    </div>
                    <br />
                    <br />
                </div>
            </asp:Panel>
            <br />
            <div>
                <asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" Font-Size="Small" BackColor="SteelBlue" Text="Send to Mail" OnClick="Button2_Click" />
            </div>
        </form>

    Code behind:

    // Simulation of the data
            private static DataTable _gridviewDT;
            public static DataTable GridviewDT
            {
                get
                {
                    if (_gridviewDT is null)
                    {
                        _gridviewDT = new DataTable();
    
                        _gridviewDT.Columns.Add("Item", typeof(string));
                        _gridviewDT.Columns.Add("Qty", typeof(string));
                        _gridviewDT.Columns.Add("Rate", typeof(string));
                        _gridviewDT.Columns.Add("Amount", typeof(string));
    
                        _gridviewDT.Rows.Add("Item_1", "100", "15%", "1000");
                        _gridviewDT.Rows.Add("Item_2", "500", "50%", "2500");
                        _gridviewDT.Rows.Add("Item_3", "600", "25%", "2000");
                        _gridviewDT.Rows.Add("Item_4", "200", "30%", "8000");
                        _gridviewDT.Rows.Add("Item_5", "800", "66%", "1500");
                        _gridviewDT.Rows.Add("Item_6", "300", "33%", "3000");
    
                    }
    
                    return _gridviewDT;
                }
                set
                {
                    _gridviewDT = value;
                }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
    
            public override void VerifyRenderingInServerForm(Control control)
            {
                /* Confirms that an HtmlForm control is rendered for the specified ASP.NET
                   server control at run time. */
            }
    
            protected void BindGridView()
            {
                Gridview1.DataSource = GridviewDT;
                Gridview1.DataBind();
            }
    
    
            protected void Button2_Click(object sender, EventArgs e)
            {
                generatePDF();
            }
    
            
    
            public void generatePDF()
            {
                string fileName = "Invoice" + DateTime.Now.ToString() + ".pdf"; 
                
    
    
                Response.Clear();
                Response.ContentType = "Application/pdf";
                Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName + ";");
                HtmlConverter.ConvertToPdf(getPanelHtml(), Response.OutputStream);
                Response.Flush();
                Response.Close();
                Response.End();
            }
    
            public string getPanelHtml()
            {
                StringBuilder sb = new StringBuilder();
                StringWriter tw = new StringWriter(sb);
                HtmlTextWriter hw = new HtmlTextWriter(tw);
                Panel1.RenderControl(hw);
                var html = sb.ToString();
    
                return html;
            }

    HTML and generated PDF:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 29, 2020 7:24 AM

All replies

  • User-1330468790 posted

    Hi georgeakpan233,

     

    I understand that you want to save the panel content to a PDF. However, I am not sure whether you want to

    a) pass it back the browser and let the user save it

    b) render another html and send the pdf file as an attachment? 

     

    From the simplest aspect, you could refer to below code to see how to save the content of the panel control and pass it back to user side. Of course, the pdf file will be created with the css style.

    aspx (exactly the same with yours however images will not be rendered): 

    <form id="form1" runat="server">
            <asp:Panel ID="Panel1" runat="server">
                <div class="parent" style="margin-left: auto; margin-right: auto; padding: 10px; display: flex; background-color: #ffffff; border: 1px solid #ccc; width: 100%;">
                    <div class="child" id="midcont" style="width: 100%; height: auto; padding: .5rem;">
                        <div style="background-color: #DCDFE6; height: 4%;">
                            <center>
                                        <div class="heading" style="font-size:11pt;font-weight:bolder;;margin-top: 0%;">
                                      <asp:Label ID="Label4" runat="server" Font-Bold="true" Font-Size="11pt" ForeColor="#000066" Text="INVOICE"></asp:Label>
                                    </div>
                                    </center>
                        </div>
                        <hr />
                        <div>
                            <asp:Label ID="Label3" runat="server" Text="Invoice N°:" Font-Size="10pt" Font-Bold="true"></asp:Label>&nbsp;<asp:Label ID="lblprefix" runat="server" Font-Size="9pt" Text="4107750829"></asp:Label>
                        </div>
                        <div class="company-address" style="border: 0px solid #ccc; float: left; width: 250pt; font-size: 9pt;">
                            <p style="font-size: 7pt;">FROM:</p>
                            <div>
                                <asp:Label ID="Label2" runat="server" Font-Bold="true" Text="Name"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lblname" runat="server" Font-Size="8pt" Text="Sending Company"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label8" runat="server" Font-Bold="true" Text="Address"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lbladdress" runat="server" Text="12 Wellington Way"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label10" runat="server" Font-Bold="true" Text="Email"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lblmail" runat="server" Text="Sender@gmail.com"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label11" runat="server" Font-Bold="true" Text="Phone N°"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="Lblphone" runat="server" Text="08127670224"></asp:Label>
                            </div>
                            <br />
                            <div>
                                <asp:Label ID="Label16" runat="server" Font-Bold="true" Font-Size="8pt" Text="Date"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="datLbl" runat="server" Text="25-Sep-2020"></asp:Label>
                            </div>
                        </div>
                        <br />
                        <br />
                        <div class="invoice-details" style="border: 0px solid #ccc; float: right; width: 250px; margin-right: 10px; font-size: 9pt;">
                            <p style="font-size: 7pt;">TO:</p>
                            <div>
                                <asp:Label ID="Label7" runat="server" Font-Bold="true" Font-Size="8pt" Text="Name"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="nameLbl" runat="server" Text="Recieving Company/Person"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label9" runat="server" Font-Bold="true" Font-Size="8pt" Text="Address"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="addressLbl" runat="server" Text="3 Sydney Val Street"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label12" runat="server" Font-Bold="true" Font-Size="8pt" Text="Email"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="mailLbl" runat="server" Text="reciever@gmail.com"></asp:Label>
                            </div>
    
                            <div>
                                <asp:Label ID="Label13" runat="server" Font-Bold="true" Font-Size="8pt" Text="Phone N°"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="phoneLbl" runat="server" Text="09087434116"></asp:Label>
                            </div>
                            <br />
                            <div>
                                <asp:Label ID="Label15" runat="server" Font-Bold="true" Font-Size="8pt" Text="Due Date"></asp:Label>
                            </div>
                            <div>
                                <asp:Label ID="dateLbl" runat="server" type="date" Text="01-Oct-2020"></asp:Label>
                            </div>
                        </div>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <asp:GridView ID="Gridview1" runat="server" Font-Size="10pt" AutoGenerateColumns="False" Style="max-width: 100%" RowStyle-Height="40px" HeaderStyle-ForeColor="#00003D"
                            BorderStyle="None" GridLines="None" Height="50px" HeaderStyle-Height="28px" HeaderStyle-BackColor="#D3D9E5">
                            <Columns>
                                <asp:BoundField DataField="Item" HeaderText="ITEM DESCRIPTION" ItemStyle-Width="70%" />
                                <asp:BoundField DataField="Qty" HeaderText="QUANTITY" ItemStyle-Width="15%" />
                                <asp:BoundField DataField="Rate" HeaderText="RATE" ItemStyle-Width="19%" />
                                <asp:BoundField DataField="Amount" HeaderText="AMOUNT" ItemStyle-Width="20%" />
                            </Columns>
                            <HeaderStyle Height="25px" />
                        </asp:GridView>
                        <hr />
                        <br />
                        <div class="pict" style="float: left; margin-left: 5%; margin-bottom: 3%;">
                            <asp:Image ID="Image1" runat="server" ImageUrl="http://localhost:49893/images/qr_code_red.png" Width="80px" Height="80px" />
                        </div>
    
                        <div class="total" style="float: right; width: 240px; font-size: 9pt;">
                            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="TOTAL:"></asp:Label>
                            <asp:Label ID="Label17" runat="server" Text="NGN"></asp:Label>&nbsp;<asp:Label ID="lblTotal" runat="server" Font-Size="9pt" Text="3000"></asp:Label>
                            <br />
                            <br />
                            <asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT (%):"></asp:Label>&nbsp;&nbsp;
                                        <asp:Label ID="vatlbl" runat="server" Font-Size="9pt" Text="5"></asp:Label>
                            <br />
                            <br />
                            <div style="background-color: #D3D9E5; height: 30px; width: 100%;">
                                <asp:Label ID="Label6" runat="server" Font-Bold="true" Text="GRAND TOTAL:"></asp:Label>
                                <asp:Label ID="Label18" runat="server" Text="NGN"></asp:Label>&nbsp;<asp:Label ID="lblGrandTotal" runat="server" Font-Size="9pt" Text="3150"></asp:Label>
                            </div>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </div>
                        <br />
                        <br />
                        <br />
                        <br />
                    </div>
                    <br />
                    <br />
                </div>
            </asp:Panel>
            <br />
            <div>
                <asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" Font-Size="Small" BackColor="SteelBlue" Text="Send to Mail" OnClick="Button2_Click" />
            </div>
        </form>

    Code behind:

    // Simulation of the data
            private static DataTable _gridviewDT;
            public static DataTable GridviewDT
            {
                get
                {
                    if (_gridviewDT is null)
                    {
                        _gridviewDT = new DataTable();
    
                        _gridviewDT.Columns.Add("Item", typeof(string));
                        _gridviewDT.Columns.Add("Qty", typeof(string));
                        _gridviewDT.Columns.Add("Rate", typeof(string));
                        _gridviewDT.Columns.Add("Amount", typeof(string));
    
                        _gridviewDT.Rows.Add("Item_1", "100", "15%", "1000");
                        _gridviewDT.Rows.Add("Item_2", "500", "50%", "2500");
                        _gridviewDT.Rows.Add("Item_3", "600", "25%", "2000");
                        _gridviewDT.Rows.Add("Item_4", "200", "30%", "8000");
                        _gridviewDT.Rows.Add("Item_5", "800", "66%", "1500");
                        _gridviewDT.Rows.Add("Item_6", "300", "33%", "3000");
    
                    }
    
                    return _gridviewDT;
                }
                set
                {
                    _gridviewDT = value;
                }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGridView();
                }
            }
    
            public override void VerifyRenderingInServerForm(Control control)
            {
                /* Confirms that an HtmlForm control is rendered for the specified ASP.NET
                   server control at run time. */
            }
    
            protected void BindGridView()
            {
                Gridview1.DataSource = GridviewDT;
                Gridview1.DataBind();
            }
    
    
            protected void Button2_Click(object sender, EventArgs e)
            {
                generatePDF();
            }
    
            
    
            public void generatePDF()
            {
                string fileName = "Invoice" + DateTime.Now.ToString() + ".pdf"; 
                
    
    
                Response.Clear();
                Response.ContentType = "Application/pdf";
                Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName + ";");
                HtmlConverter.ConvertToPdf(getPanelHtml(), Response.OutputStream);
                Response.Flush();
                Response.Close();
                Response.End();
            }
    
            public string getPanelHtml()
            {
                StringBuilder sb = new StringBuilder();
                StringWriter tw = new StringWriter(sb);
                HtmlTextWriter hw = new HtmlTextWriter(tw);
                Panel1.RenderControl(hw);
                var html = sb.ToString();
    
                return html;
            }

    HTML and generated PDF:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 29, 2020 7:24 AM
  • User-1994446809 posted

    Hi Sean Fang,

    Thanks a million. You're A genius!

    Tuesday, September 29, 2020 9:37 AM