How to Design Runtime Generated PDF Via HTML

Content

I will explain how to design a runtime generated PDF via HTML code functionality using Visual Studio Ultimate 2015 Preview.

Sometimes, when you write code to generate a runtime PDF, you need a complex structure to be added to the PDF and you might think "Can't I just use the HTML code in it to create the tables or add some text or do some formatting?" Yes, you can, using the HtmlWorker class.

Note: CSS aka style will not work.

In brief, I will generate the runtime PDF using ITextSharp.

Note: I will use the "iTextSharp.dll" as a PDF generator library. You can download it from:

Links: Sourceforge and NuGet.

You can find it on the attached file in the "bin" folder of this article but the best way is to add the ItextSharp as in Step B.

Step 1

Create a new website named "Website1".

Create a new Website

Step 2

Add the ItextSharp library from the NuGet package using the following sub steps:

  1. Click on Tools
  2. NuGet Package Manager
  3. Manage NuGet Packages for Solution

NuGet Packages

Then a popup window will open like:

popup windows

Type the "ItextSharp" into the Search TextBox. Then you will get the "ItextSharp" library in the left pane. To add it to the website just click on the Install button of the right pane.

ItextSharp

After the installation, you see the "Right" sign in the left pane that indicates that the library has been installed.

library

You can also check it from the Solution Explorer.

solution explore

Step 3

  1. Add a HTML page named "MyPage.html' and draw a table with some rows and columns or create a design that you want to add to the runtime generated PDF.
    1. <!DOCTYPE html>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <title></title>  
    5. </head>  
    6. <body>  
    7.     <div align="center"><h1><b> This is Header</b></h1></div>  
    8.     <table border="1" width="100%" height="100%">  
    9.         <tr>  
    10.             <td>First Name: </td>  
    11.             <td>Rahul   </td>             
    12.         </tr>  
    13.         <tr>  
    14.             <td>Last Name: </td>  
    15.             <td>Bansal </td>             
    16.         </tr>  
    17.     </table>  
    18. </body>  
    19. </html>  
  2. The page will look like:

    Page

  3. Convert all the double quotes (") of the HTML page into apostrophes (single quotes, in other words ').
    1. <!DOCTYPE html>  
    2. <html xmlns='http://www.w3.org/1999/xhtml'>  
    3. <head>  
    4.     <title></title>  
    5. </head>  
    6. <body>  
    7.     <div align='center'><h1><b> This is Header</b></h1></div>  
    8.     <table border='1' width='100%' height='100%'>  
    9.         <tr>  
    10.             <td>First Name: </td>  
    11.             <td>Rahul   </td>             
    12.         </tr>  
    13.         <tr>  
    14.             <td>Last Name: </td>  
    15.             <td>Bansal </td>  
    16.                    </tr>  
    17.     </table>  
    18. </body>  
    19. </html>  

Step 4

  1. Add a button to default page named "Default.aspx" and change the text to be "Generate PDF".

    Default

  2. Double-click on the button to generate an Onclick event (to generate the PDF) on the Form.

  3. Add the following 2 namespaces to the top of the ".cs" file:
    1. using iTextSharp.text;  
    2. using iTextSharp.text.pdf;  
    3. using System.IO;  
    4. using iTextSharp.text.html.simpleparser;  
  4. Write the code to generate the PDF file on the click event of the button and copy all the code of the HTML page into the "strHTML" variable.
    1. protected void Button1_Click(object sender, EventArgs e)  
    2. {  
    3.     Document pdfDoc = new Document();  
    4.     PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDoc, HttpContext.Current.Response.OutputStream);  
    5.     pdfDoc.Open();  
    6.     string strHTML = @"<!DOCTYPE html>  
    7.                         <html xmlns='http://www.w3.org/1999/xhtml'>  
    8.                         <head>  
    9.                             <title></title>  
    10.                         </head>  
    11.                         <body>  
    12.                             <div align = 'center'><h1><b>This is Header</b></h1></div>  
    13.                              <table border = '1' width = '100%' height = '100%'>  
    14.                                 <tr>  
    15.                                     <td>First Name: </td>  
    16.                                         <td>Rahul </td>           
    17.                                     </tr>  
    18.                                     <tr>  
    19.                                         <td>Last Name: </td>  
    20.                                         <td>Bansal </td>              
    21.                                     </tr>  
    22.                             </table>  
    23.                         </body>  
    24.                         </html>";  
    25.     HTMLWorker htmlWorker = new HTMLWorker(pdfDoc);         
    26.     htmlWorker.Parse(new StringReader(strHTML));  
    27.     pdfWriter.CloseStream = false;  
    28.     pdfDoc.Close();  
    29.     Response.Buffer = true;  
    30.     Response.ContentType = "application/pdf";  
    31.     Response.AddHeader("content-disposition""attachment;filename=Test.pdf");  
    32.     Response.Cache.SetCacheability(HttpCacheability.NoCache);  
    33.     Response.Write(pdfDoc);  
    34.     Response.Flush();  
    35.     Response.End();  
    36. }  

As in the following image:

code

Note:

You can provide any name of the generated file. For example here I provided "test.pdf".

Step 5

  1. Run the page that will be like:

    Run the page

  2. Click on the "Generate PDF" button, it will pop-up a window like:

    Generate PDF

  3. Open this PDF and see the output.

    output

Next Recommended Readings