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".

Step 2

Add the ItextSharp library from the NuGet package using the following substeps:

Click on Tools
NuGet Package Manager
Manage NuGet Packages for Solution

Then a popup window will open like:

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.

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

You can also check it from the Solution Explorer.

Step 3

Add an 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>
The page will look like:
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

Add a button to default page named "Default.aspx" and change the text to be "Generate PDF".
Double-click on the button to generate an Onclick event (to generate the PDF) on the Form.
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;
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:

Note:

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

Step 5

Run the page that will be like:
Click on the "Generate PDF" button, it will pop-up a window like:
Open this PDF and see the output.

Conclusion

In this article, we studied How to Design Runtime Generated PDF Via HTML.

8 Comments

Join the conversation! Your thoughts help the community grow.

Manish Kumar Choudhary11y ago
Very Helpful articles.
- Rahul Bansal11y ago
  Thanks
Sibeesh Venu11y ago
Rahul Bansal You are welcome.
Sibeesh Venu11y ago
Good one.
- Rahul Bansal11y ago
  Thanks
Harpreet Singh11y ago
very helpful
Rahul Kumar Saxena11y ago
Great one Rahul Bansal...
- Rahul Bansal11y ago
  Thanks