Click here to Skip to main content
14,872,753 members
Please Sign up or sign in to vote.
1.37/5 (5 votes)
See more:
Hello,

Here I need to implement a functionality in which I need to writr a HTML page as it is in PDF file.

Example:
But my requirement is different. Its not simple to create HTML in PDF. I need a functionality like write this current open page on PDF as it looks like.


Thanks in advance

What I have tried:

I am trying
iTextSharp
Posted
Updated 19-Feb-17 21:37pm
v2
Comments
F-ES Sitecore 9-Feb-17 4:06am
   
Google "c# save html as pdf" - this is one of the most frequently asked questions
Ajay-Systematix 9-Feb-17 5:00am
   
But my requirement is different. Its not simple to create HTML in PDF. I need a functionality like write this current open page on PDF as it looks like.
F-ES Sitecore 9-Feb-17 5:14am
   
I didn't say it was simple, I said it was a very frequently asked question which means there are already thousands of articles out there on how to do this already if you google for them.
Ajay-Systematix 9-Feb-17 5:25am
   
I also found number of solutions for it. But my requirement is not fulfill yet.
I found a 3rd party paid service for it. But I can't go with it.

Hello, finally I got a solution using JQuery.

 <!-- Scripts -->
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" />


<script>
    (function () {
        // Define variables
        var
         form = $('#dvMain'),
         cache_width = form.width(),    
         cache_height = form.height(),
         a4 = [595.28, 841.89]; // for a5 size paper width and height

        if ('@Model.Mode' == "PDF") {
            // Scroll screen
            $('body').scrollTop(0);
            // Call function createPDF
            createPDF();
        }
        //create pdf
        function createPDF() {
            if (cache_height > 600)
                cache_height = 600;

            // Call create canvas function
            getCanvas().then(function (canvas) {
                var
                 img = canvas.toDataURL("image/png"),
                 doc = new jsPDF({
                     unit: 'px',
                     format: 'a4'
                 });
                doc.addImage(img, 'JPEG', 10, 10, 420, cache_height);
                doc.save('techumber-html-to-pdf.pdf');
                form.width(cache_width);
            });
        }

        // create canvas object
        function getCanvas() {
           
            form.width((a4[0] * 1.33333)).css('max-width', 'none');
            return html2canvas(form, {
                imageTimeout: 3000,
                removeContainer: true
            });
        }

    }());

</script>



HTML:
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>
        Reference PDF
    </title>    
</head>
<body>   
    <div class="ui segment">      
        <div id="dvMain" name="dvMain">
            <div class="clr"></div>
            <div class="col-md-12">
                <label>Student Name:</label>  <label id="lblSName" name="lblSName"> @Model.Student</label> <br />
                <label>Date of Brith:</label>  @dob <br /><br />
                <label>Course applied for:</label>  @Model.ApplicationCourses
            </div>
            <div class="col-md-12">
                <br />
                <label>Referee Name:</label>  @Model.Referee <br />
                <label>Position:</label>  @Model.RefereesJobTitle<br />
                <label>Organisation:</label>  @Model.InstitutionName
            </div>
            <div class="clr"></div>
            @if (string.IsNullOrEmpty(Model.ReferenceCompletedDate))
            {
                <div class="col-md-12">
                    <label>Reference Status:</label>  Reference not completed
                </div>
            }
            else
            {
                <div class="col-md-12">
                    <label>Reference Status:</label>  Completed
                </div>
                    <br />
                    <div class="col-md-12">
                        @Html.Raw(Model.HTMLContent)
                    </div>
            }

        </div>
    </div>
</body>
</html>
   
Quote:
I need a functionality like write this current open page on PDF as it looks like.
I don't think that such can be done. However, you might be able to get a close looking result.

The problem is that HTML content is dynamically rendered depending on the viewport's size in pixels and the DPI of the monitor (used for non-pixel based element dimensions) and PDF is based on physical units of length like inch or cm.

If possible I would use a PDF printer driver and use the applications print support. It has the advantage of providing a preview so that you can simply check he result.

It allows also setting the PDF page size so that it can be adjusted to get a result that is similar to those on screen (use viewport size and monitor DPI to get the required page width). This would avoid rescaling so that the dimensions are similar to those on the screen. You can also create "long" pages that contain the whole content on one page (but there might be a limit which I actually don't know). However, such PDFs would be for screen view only (might not get printed out well).

Note that ITextSharp supports defining the page size too. So you might also use that and try to get acceptable results.
   
Comments
Ajay-Systematix 16-Feb-17 1:41am
   
Actual, my requirement is I need to add a feedback form which already completed my a referee. Need to print this feedback HTML form on PDF. Its max size A4 page.

One more thing this HTML page saved in Sql DB.
Jochen Arndt 16-Feb-17 3:08am
   
Then it would make more sense to make the HTML page look like a A4 page (e.g. by limiting the size).

Where the HTML page is stored should not care. But I hope you are not storing the whole page in a database. That would be bad design. Because it is a form, storing only the input values would be better. Then you are also not sticked to HTML but can create a databse report and print that.
Ajay-Systematix 16-Feb-17 3:25am
   
I am using master layout for manage CSS of page. It my client need.
Jochen Arndt 16-Feb-17 3:34am
   
You can use device dependant styles:
<head>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="print-stylesheet.css" media="print">
</head>

Or add media specific overrides to your existing style sheet:
@media print {
/* override print specific styles here */
}
Ajay-Systematix 16-Feb-17 3:42am
   
For handle device dependency I am using Bootstrap. It works fine.

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900