How to convert full webpage with css to pdf file with pechkin in asp.net ?

5.1k Views Asked by At

I try to convert webpage in to pdf . Now i can convert it already, But that file not same in webpage.How to get it like webpage? I use pechkin.dll to convert webpage to pdf. Please help and thank you very much.

this is a link to see my image(webform) because my reoutation < 10 so i can not post image,please follow link to see image

 http://image.ohozaa.com/view2/y3M1nVkSkXOxdIRc

And this is pdf file when i converted(link image) because my reoutation < 10 so i can not post image,please follow link to see image

http://image.ohozaa.com/view2/y3M2BMMP1aEvvLcG

this is my codebehide

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Pechkin;

namespace PechkinTest
{
public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btn_export_Click(object sender, EventArgs e)
    {

            var client = new WebClient();
            String url = Request.Url.AbsoluteUri;
            String html = client.DownloadString(url);

            #region Transform the HTML into PDF

            var pechkin = Factory.Create(new GlobalConfig());
            var pdf = pechkin.Convert(new ObjectConfig()
                                    .SetLoadImages(true).SetZoomFactor(1.5)
                                    .SetPrintBackground(true)
                                    .SetScreenMediaType(true)
                                    .SetCreateExternalLinks(true)
                                    //.SetIntelligentShrinking(true).SetCreateInternalLinks(true)
                                    .SetPageUri(url));

            #endregion

            #region Return the pdf file

            Response.Clear();

            Response.ClearContent();
            Response.ClearHeaders();

            Response.ContentType = "application/pdf";
            Response.AddHeader("Content-Disposition", string.Format("attachment;filename=test.pdf; size={0}", pdf.Length));
            Response.BinaryWrite(pdf);

            Response.Flush();
            Response.End();

            #endregion

    }
}
}

and this is my code in aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PechkinTest.WebForm1" %>

<!DOCTYPE HTML>
<!--
    Iridium by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
    <title>Iridium by TEMPLATED</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://localhost:63856/js/skel.min.js"></script>
    <script src="http://localhost:63856/js/skel-panels.min.js"></script>
    <script src="http://localhost:63856/js/init.js"></script>
    <noscript>
        <link href="http://localhost:63856/css/skel-noscript.css" rel="stylesheet" />
        <link href="http://localhost:63856/css/style.css" rel="stylesheet" />
        <link href="http://localhost:63856/css/style-desktop.css" rel="stylesheet" />
    </noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>

<body class="homepage">
    <form id="form1" runat="server">
    <!-- Header -->
    <div id="header">
        <div class="container"> 

            <!-- Logo -->
            <div id="logo">
                <h1><a href="#">Iridium</a></h1>
                <span>Design by TEMPLATED</span>
            </div>

            <!-- Nav -->
            <nav id="nav">
                <ul>
                    <li class="active"><a href="index.html">Homepage</a></li>
                    <li><a href="left-sidebar.html">Left Sidebar</a></li>
                    <li><a href="right-sidebar.html">Right Sidebar</a></li>
                    <li><a href="no-sidebar.html">No Sidebar</a></li>
                    <li><asp:Button ID="btn_export" Text="Get PDF File" runat="server" OnClick="btn_export_Click" /></li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- Main -->
    <div id="main">
        <div class="container">
            <div class="row"> 

                <!-- Content -->
                <div id="content" class="8u skel-cell-important">
                    <section>
                        <header>
                            <h2>Welcome to Iridium!</h2>
                            <span class="byline">Integer sit amet pede vel arcu aliquet pretium</span>
                        </header>
                        <a href="#" class="image full"><img src="images/pic07.jpg" alt="" /></a>
                        <p>This is <strong>Iridium</strong>, a responsive HTML5 site template freebie by <a href="http://templated.co">TEMPLATED</a>. Released for free under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so use it for whatever (personal or commercial) &ndash; just give us credit! Check out more of our stuff at <a href="http://templated.co">our site</a> or follow us on <a href="http://twitter.com/templatedco">Twitter</a>.</p>
                        <p>Sed etiam vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget lorem ipsum dolor.</p>
                    </section>
                </div>

                <!-- Sidebar -->
                <div id="sidebar" class="4u">
                    <section>
                        <header>
                            <h2>Pellentesque vulputate</h2>
                        </header>
                        <ul class="style">
                            <li>
                                <p class="posted">August 11, 2002  |  (10 )  Comments</p>
                                <img src="images/pic04.jpg" alt="" />
                                <p class="text">Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.</p>
                            </li>
                            <li>
                                <p class="posted">August 11, 2002  |  (10 )  Comments</p>
                                <img src="images/pic05.jpg" alt="" />
                                <p class="text">Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.</p>
                            </li>
                            <li>
                                <p class="posted">August 11, 2002  |  (10 )  Comments</p>
                                <img src="images/pic06.jpg" alt="" />
                                <p class="text">Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.</p>
                            </li>
                        </ul>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div id="featured">
        <div class="container">
            <div class="row">
                <div class="4u">
                    <h2>Aenean elementum facilisis</h2>
                    <a href="#" class="image full"><img src="images/pic01.jpg" alt="" /></a>
                    <p>Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum. Pellentesque viverra vulputate enim.</p>
                    <p><a href="#" class="button">More Details</a></p>
                </div>
                <div class="4u">
                    <h2>Fusce ultrices fringilla</h2>
                    <a href="#" class="image full"><img src="images/pic02.jpg" alt="" /></a>
                    <p>Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum. Pellentesque viverra vulputate enim.</p>
                    <p><a href="#" class="button">More Details</a></p>
                </div>
                <div class="4u">
                    <h2>Etiam rhoncus volutpat erat</h2>
                    <a href="#" class="image full"><img src="images/pic03.jpg" alt="" /></a>
                    <p>Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum. Pellentesque viverra vulputate enim.</p>
                    <p><a href="#" class="button">More Details</a></p>
                </div>
            </div>
        </div>
    </div>


    <!-- Footer -->
    <div id="footer">
        <div class="container">
            <div class="row">
                <div class="4u">
                    <section>
                        <h2>Latest Posts</h2>
                        <ul class="default">
                            <li><a href="#">Pellentesque lectus gravida blandit</a></li>
                            <li><a href="#">Lorem ipsum consectetuer adipiscing</a></li>
                            <li><a href="#">Phasellus nibh pellentesque congue</a></li>
                            <li><a href="#">Cras vitae metus aliquam pharetra</a></li>
                            <li><a href="#">Maecenas vitae orci feugiat eleifend</a></li>
                        </ul>
                    </section>
                </div>
                <div class="4u">
                    <section>
                        <h2>Ultrices fringilla</h2>
                        <ul class="default">
                            <li><a href="#">Pellentesque lectus gravida blandit</a></li>
                            <li><a href="#">Lorem ipsum consectetuer adipiscing</a></li>
                            <li><a href="#">Phasellus nibh pellentesque congue</a></li>
                            <li><a href="#">Cras vitae metus aliquam pharetra</a></li>
                            <li><a href="#">Maecenas vitae orci feugiat eleifend</a></li>
                        </ul>
                    </section>
                </div>
                <div class="4u">
                    <section>
                        <h2>Aenean elementum</h2>
                        <ul class="default">
                            <li><a href="#">Pellentesque lectus gravida blandit</a></li>
                            <li><a href="#">Lorem ipsum consectetuer adipiscing</a></li>
                            <li><a href="#">Phasellus nibh pellentesque congue</a></li>
                            <li><a href="#">Cras vitae metus aliquam pharetra</a></li>
                            <li><a href="#">Maecenas vitae orci feugiat eleifend</a></li>
                        </ul>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <!-- Copyright -->
    <div id="copyright">
        <div class="container">
            Design: <a href="http://templated.co">TEMPLATED</a> Images: <a href="http://unsplash.com">Unsplash</a> (<a href="http://unsplash.com/cc0">CC0</a>)
        </div>
    </div>
    </form>
</body>
</html>
2

There are 2 best solutions below

0
On

Pechkin renders the HTML the same way a (webkit) webpage would. Meaning it's important to ensure that all CSS and JS (UI rendering related) is referenced properly.

0
On

I would suggest that you create a webpage that displays what you want printed and place it at a known location in your web app.

Then use the url version of the Tuespechkin routines (the ones I use) to supply a path to your print page.

The server will do all the rendering, and send it to the tuespechkin routines (the ones I use) the same way a user would receive the output if they were calling the print routine page directly.

This avoids most of the issues with rendering that this htmltopdf software has.

I just use the print page, and I get the output exactly as I want it.

I would also recommend you switch to Tuespechkin because it has been recently updated.