How to print a complete HTML page contents with style and CSS on PDF?

Question

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 8-Feb-17 19:25pm

Ajay-Systematix

Updated 19-Feb-17 21:37pm

v2

Add a Solution

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.

2 solutions

Solution 1

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.

Posted 9-Feb-17 0:32am

Jochen Arndt

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.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Ajay-Systematix · Accepted Answer · 2017-02-19T21:37:00

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>