Support forums » Products » Rich Text Editor for .NET and ... » Re: Edited content save as PDF when I click a Button

Edited content save as PDF when I click a Button

Last post 01-26-2016, 11:07 PM by evanpan. 8 replies.
Sort Posts: Previous Next

  •  10-12-2015, 1:41 AM 81078

    Edited content save as PDF when I click a Button

    Reply Quote

    I'm loading .HTML file to richtext editor content that contains inside the project.

    Once HTML file loaded, I can do changes of that content.

     

    this is the initial view of that 

     

     

     

    this is the changed view of that rich text editor content 

     

     

     

     this is controller action to load rich text editor

    1. public ActionResult Index()  
    2. {              
    3.   
    4.     Editor Editor1 = new Editor(System.Web.HttpContext.Current, "Editor1");              
    5.   
    6.     Editor1.LoadHtml("~/brochuretemplates/myhtml.html");  
    7.   
    8.     Editor1.MvcInit();  
    9.   
    10.     ViewBag.Editor = Editor1.MvcGetString();  
    11.   
    12.     return View();  
    13. }
    Now I want to save that newly edited content  as a PDF , but for that I should call following syntax inside 

    above controller method  .  

    1. Editor1.SavePDF("~/doc/mtPDF.pdf");  

     So with the changes code snippet will be like this 

     

     

    1. public ActionResult Index()   { 
    2.                      
    3. Editor Editor1 = new Editor(System.Web.HttpContext.Current, "Editor1"); 
    4.                      
    5. Editor1.LoadHtml("~/brochuretemplates/myhtml.html"); 
    6.          
    7. Editor1.MvcInit();          
    8.  
    9. ViewBag.Editor = Editor1.MvcGetString(); 
    10.  
    11. Editor1.SavePDF("~/doc/mtPDF.pdf");   
    12.          
    13. return View();  
    14.  
    15. }    

     

    that mens once its loading its saving  as PDF

     

     

    But I want to save as PDF when I click a Button How can I ivoke that savePDF method outside the loading  action

     

     

     

    Like above view ,

    Once I click Save as PDF button , I want to retrieve the current content of this rich text editor and then pass those data-set to SavePDF method,

     

     
    Filed under:

  •  10-12-2015, 8:22 AM 81082 in reply to 81078

    Re: Edited content save as PDF when I click a Button

    Reply Quote

    Hi,

     

    You can try the way below. it has two sections, the first section use to load the content and render the editor when page load, the second part will fire after you click on the save button or do a page post back, so you can save the pdf file in second part.

     

    1. [ValidateInput(false)]  
    2.     public ActionResult output_xhtml()  
    3.     {  
    4.         PrepairEditor(delegate(Editor editor)  
    5.         {  
    6.                editor.LoadHtml("~/x.html");  
    7.         });  
    8.         return View();  
    9.     }  
    10.   
    11.     [HttpPost]  
    12.     [ValidateInput(false)]  
    13.     public ActionResult output_xhtml(string m = "")  
    14.     {  
    15.         Editor theeditor=PrepairEditor(delegate(Editor editor)  
    16.         {  
    17.   
    18.         });  
    19.            theeditor.SavePDF("~x.pdf");  
    20.         return View();  
    21.     }  
     

    Regards,

     

    ken 

  •  10-12-2015, 11:26 PM 81084 in reply to 81082

    Re: Edited content save as PDF when I click a Button

    Reply Quote

     Hi Kenneth,

     

    Thanks for the help, but where this PrepairEditor()  method defined , do I need implement under my controller or it can use once I import a specific library ?
    Filed under:

  •  10-13-2015, 12:53 PM 81093 in reply to 81084

    Re: Edited content save as PDF when I click a Button

    Reply Quote

    Hi,

     

    below is the code of it, you also can find it from the mvc demo controller file.

     

    1. protected Editor PrepairEditor(Action<Editor> oninit)  
    2.         {  
    3.             Editor editor = new Editor(System.Web.HttpContext.Current, "editor");  
    4.   
    5.             editor.ClientFolder = "/richtexteditor/";  
    6.             editor.ContentCss = "/Content/example.css";  
    7.             //editor.ClientFolder = "/Content/richtexteditor/";  
    8.             //editor.ClientFolder = "/Scripts/richtexteditor/";  
    9.   
    10.             editor.Text = "Type here";  
    11.   
    12.             editor.AjaxPostbackUrl = Url.Action("EditorAjaxHandler");  
    13.   
    14.             if (oninit != null) oninit(editor);  
    15.   
    16.             //try to handle the upload/ajax requests  
    17.             bool isajax = editor.MvcInit();  
    18.   
    19.             if (isajax)  
    20.                 return editor;  
    21.   
    22.             //load the form data if any  
    23.             if (this.Request.HttpMethod == "POST")  
    24.             {  
    25.                 string formdata = this.Request.Form[editor.Name];  
    26.                 if (formdata != null)  
    27.                     editor.LoadFormData(formdata);  
    28.             }  
    29.   
    30.             //render the editor to ViewBag.Editor  
    31.             ViewBag.Editor = editor.MvcGetString();  
    32.   
    33.             return editor;  
    34.         }  
    35.   
    36.         //this action is specified by editor.AjaxPostbackUrl = Url.Action("EditorAjaxHandler");  
    37.         //it will handle the editor dialogs Upload/Ajax requests  
    38.         [ValidateInput(false)]  
    39.         public ActionResult EditorAjaxHandler()  
    40.         {  
    41.             PrepairEditor(delegate(Editor editor)  
    42.             {  
    43.   
    44.             });  
    45.             return new EmptyResult();  
    46.         }  
     

    Regards,

     

    Ken 

  •  10-13-2015, 11:44 PM 81094 in reply to 81093

    Re: Edited content save as PDF when I click a Button

    Reply Quote

     Hi thank you very much for your help up to now , because of your help I able to save to PDF once I click a button.

     

     but there is an issue, once I click the button its saving ""Type here" text only ,

     

    this is the view of it.

     

     

     

    it doesn't extracting currntly edited content from the RTE ,  I think its saving "Type here"  text because of this code line 

    1. editor.Text = "Type here";  
      inside the PrepairEditor() method . How to extract currently edited content ?

     

    Here my relavant , BrochureController.cs file methods 

     

     

    1. [ValidateInput(false)]  
    2. public ActionResult output_xhtml()  
    3. {  
    4.     PrepairEditor(delegate (Editor editor)  
    5.     {  
    6.         editor.LoadHtml("~/brochuretemplates/myhtml.html");  
    7.     });  
    8.     return View();  
    9. }  
    10.   
    11. [HttpPost]  
    12. [ValidateInput(false)]  
    13. public ActionResult output_xhtml(string m)  
    14. {  
    15.     Editor theeditor = PrepairEditor(delegate (Editor editor)  
    16.     {  
    17.   
    18.     });  
    19.   
    20.     theeditor.SavePDF(m);  
    21.   
    22.     return View();  
    23. }  
    24.   
    25.   protected Editor PrepairEditor(Action<Editor> oninit)  
    26.    {  
    27.     Editor editor = new Editor(System.Web.HttpContext.Current, "editor");  
    28.   
    29.     editor.ClientFolder = "/richtexteditor/";  
    30.     editor.ContentCss = "/Content/example.css";  
    31.     //editor.ClientFolder = "/Content/richtexteditor/";    
    32.     //editor.ClientFolder = "/Scripts/richtexteditor/";    
    33.   
    34.     editor.Text = "Type here";  
    35.   
    36.     editor.AjaxPostbackUrl = Url.Action("EditorAjaxHandler");  
    37.   
    38.     if (oninit != null) oninit(editor);  
    39.   
    40.     //try to handle the upload/ajax requests    
    41.     bool isajax = editor.MvcInit();  
    42.   
    43.     if (isajax)  
    44.         return editor;  
    45.   
    46.     //load the form data if any    
    47.     if (this.Request.HttpMethod == "POST")  
    48.     {  
    49.         string formdata = this.Request.Form[editor.Name];  
    50.         if (formdata != null)  
    51.             editor.LoadFormData(formdata);  
    52.     }  
    53.   
    54.     //render the editor to ViewBag.Editor    
    55.     ViewBag.Editor = editor.MvcGetString();  
    56.   
    57.     return editor;  
    58. }  
    59.   
    60. //this action is specified by editor.AjaxPostbackUrl = Url.Action("EditorAjaxHandler");    
    61. //it will handle the editor dialogs Upload/Ajax requests    
    62. [ValidateInput(false)]  
    63. public ActionResult EditorAjaxHandler()  
    64. {  
    65.     PrepairEditor(delegate (Editor editor)  
    66.     {  
    67.   
    68.     });  
    69.     return new EmptyResult();  
    70. }  

     

     Here the output_xhtml.cshtml file

     

    1. @{  
    2.     ViewBag.Title = "Index";  
    3.     Layout = "~/Views/Shared/_Layout.cshtml";  
    4. }  
    5.   
    6. <h4> Edit the Brochure </h4>  
    7.   
    8.   
    9. <form>  
    10.     <div> @Html.Raw(ViewBag.Editor) </div>  
    11. </form>  
    12.   
    13. <div style="margin-top:10px">  
    14.     <button id="MyButton" type="button" class="btn btn-danger submit">Save as PDF</button>  
    15. </div>  
    16.   
    17. @section Scripts {  
    18.     @Scripts.Render("~/bundles/jqueryval")  
    19.     @Scripts.Render("~/bundles/jqueryui")  
    20.   
    21. <script>  
    22.   
    23.     $('#MyButton').click(function () {  
    24.   
    25.         var model = { m: "~/brochuretemplates/anemeh.pdf" };  
    26.   
    27.            $.ajax({  
    28.                 url: '@Url.Action("output_xhtml", "Brochure")',  
    29.                 contentType: 'application/json; charset=utf-8',  
    30.                 type: 'POST',  
    31.                 dataType: 'html',  
    32.                 data: JSON.stringify(model)  
    33.             })  
    34.             .success(function(result) {  
    35.             });  
    36.     });  
    37.   
    38. </script>  
    39.   
    40.   
    41.   
    42. <script type='text/javascript'>  
    43. function RichTextEditor_OnLoad(editor)  
    44. {  
    45.     editor.SetWidth(1150); //Sets the width.  
    46.     editor.SetHeight(612); //Sets the height.  
    47. }  
    48. </script>  
    49. }  
     

     
    Filed under: ,

  •  10-14-2015, 11:12 AM 81102 in reply to 81094

    Re: Edited content save as PDF when I click a Button

    Reply Quote

    Hi,

     

    Can you try my code? Does it has the same issue too?

     

    1. protected Editor PrepairEditor(Action<Editor> oninit)  
    2.       {  
    3.           Editor editor = new Editor(System.Web.HttpContext.Current, "editor");  
    4.   
    5.           editor.ClientFolder = "/richtexteditor/";  
    6.           editor.ContentCss = "/Content/example.css";  
    7.           //editor.ClientFolder = "/Content/richtexteditor/";      
    8.           //editor.ClientFolder = "/Scripts/richtexteditor/";      
    9.   
    10.           editor.Text = "Type here";  
    11.   
    12.           editor.AjaxPostbackUrl = Url.Action("EditorAjaxHandler");  
    13.   
    14.           if (oninit != null) oninit(editor);  
    15.   
    16.           //try to handle the upload/ajax requests      
    17.           bool isajax = editor.MvcInit();  
    18.   
    19.           if (isajax)  
    20.               return editor;  
    21.   
    22.           //load the form data if any      
    23.           if (this.Request.HttpMethod == "POST")  
    24.           {  
    25.               string formdata = this.Request.Form[editor.Name];  
    26.               if (formdata != null)  
    27.                   editor.LoadFormData(formdata);  
    28.           }  
    29.   
    30.           //render the editor to ViewBag.Editor      
    31.           ViewBag.Editor = editor.MvcGetString();  
    32.   
    33.           return editor;  
    34.       }  
    35.   
    36.       //this action is specified by editor.AjaxPostbackUrl = Url.Action("EditorAjaxHandler");      
    37.       //it will handle the editor dialogs Upload/Ajax requests      
    38.       [ValidateInput(false)]  
    39.       public ActionResult EditorAjaxHandler()  
    40.       {  
    41.           PrepairEditor(delegate(Editor editor)  
    42.           {  
    43.   
    44.           });  
    45.           return new EmptyResult();  
    46.       }    
     

    1. [ValidateInput(false)]  
    2.       public ActionResult output_xhtml()  
    3.       {  
    4.           PrepairEditor(delegate(Editor editor)  
    5.           {  
    6.               editor.LoadHtml("~/example.html");  
    7.           });  
    8.           return View();  
    9.       }  
    10.   
    11.       [HttpPost]  
    12.       [ValidateInput(false)]  
    13.       public ActionResult output_xhtml(string m)  
    14.       {  
    15.           Editor theeditor = PrepairEditor(delegate(Editor editor)  
    16.           {  
    17.   
    18.           });  
    19.   
    20.           theeditor.SavePDF("~/aaa.pdf");  
    21.   
    22.           return View();  
    23.       }   
     

    View page

     

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title>RichTextEditor - Output XHTML</title>  
    5.     <link rel="stylesheet" href="/Content/example.css" type="text/css" />  
    6. </head>  
    7. <body>  
    8.     <script type="text/javascript">  
    9.         var editor;  
    10.         function RichTextEditor_OnLoad(rteeditor) {  
    11.             editor = rteeditor;  
    12.             var content = true;  
    13.             if (!content) {  
    14.                 setTimeout(function () {  
    15.                     editor.SetText("<table cellspacing=\"4\" cellpadding=\"4\" border=\"0\"><tr><td><p><img src=\"http://www.richtexteditor.com/uploads/j0262681.jpg\" alt=\"\" /></p></td> <td> <p>When your algorithmic and programming skills have reached a level which you cannot improve any further, refining your team strategy will give you that extra edge you need to reach the top. We practiced programming contests with different team members and strategies for many years, and saw a lot of other teams do so too.</p></td></tr> <tr> <td> <p> <img src=\"http://www.richtexteditor.com/uploads/PH02366J.jpg\" alt=\"\" /></p></td> <td> <p>From this we developed a theory about how an optimal team should behave during a contest. However, a refined strategy is not a must: The World Champions of 1995, Freiburg University, were a rookie team, and the winners of the 1994 Northwestern European Contest, Warsaw University, met only two weeks before that contest.</p></td></tr></table>");  
    16.                 }, 1000);  
    17.                 return;  
    18.             }  
    19.         }  
    20.     </script>  
    21.     @using (Html.BeginForm())  
    22.     {   
    23.         <h1>  
    24.             Support output well-formed HTML and XHTML</h1>  
    25.         <p>  
    26.             This example shows RichTextEditor supports output well-formed XHTML. Your choice  
    27.             of XHTML 1.0 or HTML 4.01 output.  
    28.         </p>  
    29.         <div>  
    30.             @Html.Raw(ViewBag.Editor)  
    31.             <br />  
    32.             <button id="btn_sumbit" type="submit">  
    33.                 Submit</button>  
    34.         </div>  
    35.         <br />  
    36.         <div>  
    37.             <h3>  
    38.                 Result html:</h3>  
    39.             <div>  
    40.                 @ViewBag._content  
    41.             </div>  
    42.         </div>  
    43.     }  
    44. </body>  
    45. </html>  
     

    Regards,

     

    Ken 

  •  10-15-2015, 12:25 AM 81104 in reply to 81102

    Re: Edited content save as PDF when I click a Button

    Reply Quote

    once I integrate your code 

     

    I'm getting this error 

     

     A potentially dangerous Request.Form value was detected from the client (editor="<div id="header" sty...").

     

    what to do now

     

     

  •  10-15-2015, 4:48 AM 81117 in reply to 81104

    Re: Edited content save as PDF when I click a Button

    Reply Quote
    Able to fixed this "save to PDF once I click" error , thaks lot for your help

  •  01-26-2016, 11:07 PM 82347 in reply to 81117

    Re: Edited content save as PDF when I click a Button

    Reply Quote

    Hi, Kelum.
    Did you have any exprience about extracting text from pdf files? I wonder whether there are any differences between pdf extraction and pdf to text conversion process? Whose way of processing is much simpler and faster? Any suggestion will be appreciated. Thanks in advance.       

     

     

     

    Best regards,

    Pan
View as RSS news feed in XML