Click here to Skip to main content
15,867,756 members
Articles / Web Development / HTML
Tip/Trick

Export HTML Div (with Hindi Unicode content) to PDF in ASP.NET

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
21 Mar 2015CPOL2 min read 37.2K   2.7K   9   8
A useful tip to export a Div to PDF (with Unicode support) with the help of NReco-PDF Generator for .NET (C#), JQuery and Handler in ASP.NET

Introduction

It's a very tough time when we have to generate PDF from HTML (having Unicode content) in ASP.NET. Though we have several options like RDLC, Crystal Reports, itextsharp library, etc., RDLC and Crystal Reports are better when we go through server side programming and itextsharp lacks functionality when it comes to Unicode support like Hindi Unicode fonts. But what when we are using JQuery in ASP.NET and want to export a div content to PDF as we see on browser.

It's the time to use NReco PDF Generator. It's a wrapper for WkHtmlToPdf tool. We can also use WkHtmlToPdf tool but Nreco is simple and mostly everything is readymade.

What We Must Know

  1. Jquery (jquery-2.1.3.min.js has been used in the demo)
  2. Web Handler

Using the Code

Let's go step by step to make things work.

  1. First, we add NReco.PdfGenerator.dll to the bin folder of our project. You can download the DLL from NReco's official website or you can get the DLL from the demo attached to the post.
  2. Add reference to the following two JS in Head section. ExportToPDF.js can be found in the demo. It has got the function that sends HTML to Web Handler.
    ASP.NET
    <script src="scripts/jquery-2.1.3.min.js"></script>
    <script src="scripts/ExportToPDF.js"></script>
    
  3. Now add the function on click event of button that casts the spell.
    ASP.NET
    <script type="text/javascript">
        $(document).on('click', '#btnPrint', function () {
            ExportToPDF($('#divtoPrint'),[], '??????? ???????', PDFPageType.Portrait);
        });
    </script>
    

    The function has 4 parameters:

    • The first one is for the HTML content that we want to print. In our demo, we have provided the div having Id 'divtoPrint' to our function as first parameter that means we will be getting all the HTML of the div by using Jquery selector $('#divtoPrint').
    • Second is an Array for the table inside that Div. If you wish to hide some columns of the Table, for example, if you wish to hide first and second column of the Table, then you will have to pass [0,1] as second parameter of the function.
    • The third parameter is the Heading of the Report.
    • The fourth parameter is the Page Type. PDFPageType is an enum. It has 3 options to choose from, i.e., Default,Portrait and Landscape. If you wish to print our HTML as Landscape, then we have to choose PDFPageType.Landscape and so on.

    You can also create several functions. The code is very simple. You can easily understand it and modify it according to your requirement.

  4. Now we add our Web Handler ExportHandler.ashx. You can get the handler in the demo. I have explained the handler functionality in depth in the demo and properly commented wherever needed.
  5. Now just run the page and click the print button. Wow...!!!! We have converted our HTML to PDF.

Point of Interest

I will provide further explanations in future updates. Web Handler has got NReco functionality. You can change several settings in it as per your requirements.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
United States United States
Passionate for Coding,kind of geek ,creative way of thinking, R&D freak,New Web technologies's admirer,Cappuccino lover that's what simply define me.

Great lines by Steve Jobs that I follow
"Stay Hungry Stay Foolish"

Comments and Discussions

 
QuestionProblem in Shared Hosting. Pin
ss9o9o9o12-Jul-16 3:29
ss9o9o9o12-Jul-16 3:29 
AnswerRe: Problem in Shared Hosting. Pin
Amit Singh Baghel18-Jul-16 21:36
Amit Singh Baghel18-Jul-16 21:36 
QuestionNice One Pin
ss9o9o9o1-Jul-16 21:03
ss9o9o9o1-Jul-16 21:03 
AnswerRe: Nice One Pin
Amit Singh Baghel18-Jul-16 21:37
Amit Singh Baghel18-Jul-16 21:37 
QuestionNot Working Pin
shijo2888328-Apr-16 23:42
shijo2888328-Apr-16 23:42 
AnswerRe: Not Working Pin
Amit Singh Baghel18-Jul-16 21:34
Amit Singh Baghel18-Jul-16 21:34 
QuestionNot able to show image in pdf file Pin
Ashwin.Ojha21-Mar-15 22:01
Ashwin.Ojha21-Mar-15 22:01 
AnswerRe: Not able to show image in pdf file Pin
Amit Singh Baghel21-Mar-15 23:25
Amit Singh Baghel21-Mar-15 23:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.