This is a migrated thread and some comments may be shown as answers.

[Solved] HTML to PDF shows blank

1 Answer 242 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Vipin asked on 04 Aug 2009, 08:43 AM

Hello,

I have a Radeditor which is used to edit HTML Newsletter templates. I have a button on whose click event i have to save the template in database(So later i could mail those templates), also i have to convert the html content to PDF format. I tried the below Pasted code, but the PDF i obtained is showing out to be blank.

Please refer the following code snippet:

ASPX Page:

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="CreateNewsletter.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        
               <title>Template 2 - Left Sidebar</title> 
        
                <link href="CSS/screen.css" rel="stylesheet" type="text/css" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server" style="height: 100%">  
        
                    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">  
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadEditor ID="Template_content" runat="server" Height="600px"   
        
                        Width="100%" ContentFilters="MakeUrlsAbsolute" OnExportContent="Template_content_ExportContent">  
        
                        <MediaManager ViewPaths="~/PDF/" UploadPaths="~/PDF/" /> 
        
                    <ExportSettings OpenInNewWindow="true"></ExportSettings> 
        
                    <Content> 
        
                 <table style="background-color: #99cc00;" cellspacing="0" cellpadding="10" width="100%">  
        
                        <tbody> 
        
                            <tr> 
        
                                <td valign="top" align="center">  
        
                                <table cellspacing="0" cellpadding="0" width="600">  
        
                                    <tbody> 
        
                                        <tr> 
        
                                            <td style="border-top: #000000 0px solid; border-bottom: #ffffff 1px solid; background-color: #ffcc66; text-align: center;" align="center"><span style="font-size: 10px; color: #996600; line-height: 200%; font-family: verdana; text-decoration: none;">Email not displaying correctly? <a href="*|ARCHIVE|*" style="font-size: 10px; color: #996600; line-height: 200%; font-family: verdana; text-decoration: none;">View it in your browser.</a></span></td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td style="border-top: #333333 0px solid; border-bottom: #ffffff 10px solid; background-color: #ffffff;" valign="middle" align="left"><center><a href=""><img id="editableImg1" title="Your Company" style="border: 0px solid;   " alt="Your Company" src="img/logo_2column.jpg" /></a></center></td>  
        
                                        </tr> 
        
                                    </tbody> 
        
                                </table> 
        
                                <table style="background-color: #ffffff;" cellspacing="0" cellpadding="20" width="600">  
        
                                    <tbody> 
        
                                        <tr> 
        
                                            <td style="border-right: #cccccc 1px dashed; width: 200px; background-color: #ffffff; text-align: left;" valign="top"><span style="font-weight: normal; font-size: 11px; color: #999999; line-height: 150%; font-family: arial;"><span style="font-weight: bold; font-size: 15px; color: #333333; line-height: 150%; font-family: arial;">Grooming Tips:</span><br /> 
        
                                            Tick picking novice? Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Sed at erat. Phasellus condimentum. Nullam sed magna. Donec quis tellus in neque congue porttitor. Proin sit amet ligula id leo porta rutrum. <br /> 
        
                                            <br /> 
        
                                            <span style="font-weight: bold; font-size: 15px; color: #333333; line-height: 150%; font-family: arial;">Waterhole Dangers</span><br /> 
        
                                            Watery oasis, or crocodilian cesspool from hell? As the dry season approaches, lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Sed at erat. Phasellus condimentum. Nullam sed magna. Donec quis tellus in neque congue porttitor. Proin sit amet ligula id leo porta rutrum. </span></td>  
        
                                            <td style="font-size: 12px; width: 400px; color: #000000; line-height: 150%; font-family: trebuchet ms; background-color: #ffffff;" valign="top">  
        
                                            <p><span style="font-weight: bold; font-size: 20px; color: #cc6600; line-height: 110%; font-family: arial;">Why Are Tigers So Mean?</span><br /> 
        
                                            <span style="font-weight: normal; font-size: 11px; color: #666666; font-style: italic; font-family: arial;">by Frederick Von Chimpenheimer</span><br /> 
        
                                            Recent psychological studies and brain scans have shown that tigers have naturally violent tendencies toward chimpanzees. &quot;There&apos;s sort of a banana-envy thing going on, which makes the average tiger very self-conscious around chimpanzees&quot; says Dr. Chimpfried Brown. Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Sed at erat. Phasellus condimentum. Nullam sed magna. Donec quis tellus in neque congue porttitor. Proin sit amet ligula id leo porta rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In suscipit, pede a rutrum malesuada, lacus massa euismod neque, a hendrerit justo ante at eros. <a href="#">Clickitus heritus.</a> </p> 
        
                                            <p><span style="font-weight: bold; font-size: 20px; color: #cc6600; line-height: 110%; font-family: arial;">Plantains vs. Bananas</span><br /> 
        
                                            <span style="font-weight: normal; font-size: 11px; color: #666666; font-style: italic; font-family: arial;">by Francine Chimperson</span><br /> 
        
                                            Throwing a party? There&apos;s no better way to anger your dinner guests than by accidentally serving them plantains instead of bananas. Avoid the poo flinging with these handy guidelines. Plantains look like over ripe bananas, and must be cooked before eaten. Bananas are softer, and don&apos;t cook very well (they get mushy). In suscipit, pede a rutrum malesuada, lacus massa euismod neque <a href="#">Clickitus heritus.</a> </p> 
        
                                            </td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td style="border-top: #ffffff 10px solid; background-color: #ffffcc;" valign="top" colspan="2"><span style="font-size: 10px; color: #996600; line-height: 100%; font-family: verdana;">*|LIST:DESCRIPTION|* <br /> 
        
                                            <br /> 
        
                                            <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* from this list.<br /> 
        
                                            <br /> 
        
                                            Our mailing address is:<br /> 
        
                                            *|LIST:ADDRESS|*<br /> 
        
                                            <br /> 
        
                                            Our telephone:<br /> 
        
                                            *|LIST:PHONE|*<br /> 
        
                                            <br /> 
        
                                            Copyright (C) 2007 *|LIST:COMPANY|* All rights reserved.<br /> 
        
                                            <br /> 
        
                                            <a href="*|FORWARD|*">Forward</a> this email to a friend </span></td>  
        
                                        </tr> 
        
                                    </tbody> 
        
                                </table> 
        
                                </td> 
        
                            </tr> 
        
                        </tbody> 
        
                    </table> 
        
                    </Content> 
        
                     <ImageManager ViewPaths="~/img" UploadPaths="~/img" MaxUploadFileSize="1024000" /> 
        
                    </telerik:RadEditor> 
        
                    <asp:Button ID="btn_createNewsletter" runat="server" Text="Save"   
        
                        onclick="btn_createNewsletter_Click" /> 
        
                </form> 
        
            </body> 
        
            </html>

CS Page:

    
            using System;  
        
            using System.Configuration;  
        
            using System.Data;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.HtmlControls;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Xml.Linq;  
        
            using System.Data.SqlClient;  
        
            using System.Web.Configuration;  
        
            using Telerik.Web.UI;  
        
            using System.IO;  
        
            public partial class _Default : System.Web.UI.Page   
        
            {  
        
                string connectionString = WebConfigurationManager.ConnectionStrings["ConnectionString2"].ConnectionString;  
        
                string url, path = "";  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    url = String.Format("~/PDF/{0}.pdf", Template_content.ExportSettings.FileName);  
        
                    path = Server.MapPath(url);  
        
                }  
        
                protected void btn_createNewsletter_Click(object sender, EventArgs e)  
        
                {  
        
                    string str = Template_content.Content;  
        
                    str = str.Replace("'","''");  
        
                    DateTime dt = new DateTime();  
        
                    string InsertSQL = "Insert Into Newsletter(Template,CreatedDate,NewsLetterName) Values ('" + str + "',@CreatedDate,'Template8') ";  
        
                    SqlConnection conn = new SqlConnection(connectionString);  
        
                    SqlCommand cmd = new SqlCommand(InsertSQL, conn);  
        
                    cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now.Date);  
        
                    conn.Open();  
        
                    try 
        
                    {  
        
                        cmd.ExecuteNonQuery();  
        
                        conn.Close();  
        
                        //Template_content.ExportSettings.FileName = "MyPDFChinmay";  
        
                        Template_content.ExportToPdf();  
        
                    }  
        
                    catch(Exception err)  
        
                    {  
        
                        conn.Close();  
        
                    }  
        
                }  
        
                protected void Template_content_ExportContent(object sender, Telerik.Web.UI.EditorExportingArgs e)  
        
                {  
        
                    if (File.Exists(path))  
        
                    {  
        
                        File.Delete(path);  
        
                    }  
        
                    using (FileStream fs = File.Create(path))  
        
                    {  
        
                        Byte[] info = System.Text.Encoding.Default.GetBytes(e.ExportOutput);  
        
                        fs.Write(info, 0, info.Length);  
        
                    }  
        
                    Response.Redirect("Newsletter.aspx");  
        
                }  
        
            }

Please provide the workaround that solves my problem.

Regards,
Vipin Ajmera.

1 Answer, 1 is accepted

answered on 06 Aug 2009, 11:15 AM

Hi Vipin,

At present there are some inconsistencies between the XHTML format which RadEditor produces, and the open-source HTML 2 PDF tool that has been incorporated into the editor to perform the PDF export. We are still working on those and eventually the code will be integrated into the editor itself to provide for transparent and seamless experience.

In your particular case, you are using a TABLE elelement - and this seems to the reason for the failed export. It appears that the exported needs to have a COLGROUP and COL elements for each table column. We have implemented a custom content filter that addresses the known problems, and for your convenience I post its code here. You can learn more about content filters from the following demo:
http://demos.telerik.com/aspnet-ajax/editor/examples/contentfilters/defaultcs.aspx

Here is the filter's code itself:

    
            <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad" > 
        
             <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" /> 
        
             <ExportSettings OpenInNewWindow="true" /> 
        
                <Content> 
        
                </Content> 
        
            </telerik:RadEditor>   
        
            <script type="text/javascript"> 
        
                var editorObject; 
        
                function OnClientLoad(editor, args) 
        
                { 
        
                   editor.get_filtersManager().add(new MyFilter()); 
        
                   editorObject = editor; 
        
                } 
        
                MyFilter = function() 
        
                { 
        
                   MyFilter.initializeBase(this); 
        
                   this.set_isDom(true); 
        
                   this.set_enabled(true); 
        
                   this.set_name("RadEditor filter"); 
        
                   this.set_description("RadEditor filter description"); 
        
                } 
        
                MyFilter.prototype = 
        
                { 
        
                //Table neeed 1) COLGOUPS!, 2) width! 
        
                   getHtmlContent : function(content) 
        
                   { 
        
                     var newContent = content; 
        
                     var tables = newContent.getElementsByTagName("TABLE"); 
        
                     var colCount = null; 
        
                     var editorDocument = editorObject.get_document(); 
        
                     for (var i=0; i < tables.length; i++) 
        
                     { 
        
                            var table = tables[i]; 
        
                            table.style.width = "0px"; 
        
                            //If there are colgroups - skip table 
        
                            var groups = table.getElementsByTagName("colgroup"); 
        
                            if (groups.length > 0) continue;//! 
        
                            colCount  = table.rows[0].cells.length;                                                    
        
                           // create colgroup 
        
                           var newColGroup = editorDocument.createElement("colgroup"); 
        
                           // create cols 
        
                           var newCol; 
        
                           for(var j=0; j<colCount; j++) 
        
                           { 
        
                              // create cols 
        
                              newCol = editorDocument.createElement("col"); 
        
                              newColGroup.appendChild(newCol); 
        
                           } 
        
                           //table.appendChild(newColGroup) 
        
                           table.insertBefore(newColGroup, table.firstChild); 
        
                     } 
        
                     //newContent = newContent.toUpperCase(); 
        
                     return newContent; 
        
                   } 
        
                } 
        
                MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter); 
        
                </script>

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.