Header and Footer in Print

[fordevjfdhshdj]

Hello

I want to use your editor.

Is it possible that when a user enters text and clicks on the print icon, the preview that is displayed has a header and footer?

I want to show a preview to the user. With the selected page size and header and footer

[Revanth Krishnan]

Hi fordevjfdhshdj, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When Rich Text Editor’s print icon is clicked need to display the header, footer and the selected page size in the preview”. 

 

The header and the footer can be previewed by adding the header and footer elements with CSS in the content using the `actionBegin` event and reverting back to original content using the `actionComplete` event. We have prepared a sample for your reference, 

 

Code Snippet: 

<script> 

    var currentValue = ""; 

    var headerValue = "Header Content when print"; 

    var footerValue = "Footer Content when print"; 

    function onCreate() { 

        defaultRTE = this; 

    } 

 

    function actionBeginFunc(args) { 

        if (args.requestType === "print") { 

            currentValue = args.element.innerHTML; 

            args.element.innerHTML = 

              `<div class="page-header" style="text-align: center">` + 

              headerValue + 

              `</div> 

              <div class="page-footer" style="border-top: 1px solid black;position: fixed; bottom: 0; width: 100%;">` + 

              footerValue + 

              `</div> 

              <table> 

                <thead> 

                  <tr> 

                    <td> 

                      <!--place holder for the fixed-position header--> 

                      <div class="page-header-space"></div> 

                    </td> 

                  </tr> 

                </thead> 

                <tbody> 

                  <tr> 

                    <td><div class="page">` + 

              args.element.innerHTML + 

              `</div> 

                    </td> 

                  </tr> 

                </tbody> 

                <tfoot> 

                  <tr> 

                    <td> 

                      <div class="page-footer-space"></div> 

                    </td> 

                  </tr> 

                </tfoot> 

              </table>`; 

          } 

    } 

 

    function actionCompleteFunc(args) { 

        if (args.requestType === "print") { 

            defaultRTE.inputElement.innerHTML = currentValue; 

        } 

    } 

</script> 

 

<style> 

                        body { 

                                    touch-action: none; 

                        } 

 

                        /* Styles for Header and footer when Print */ 

                        .page-header, 

                        .page-header-space { 

                                    height: 100px; 

                        } 

 

                        .page-footer, 

                        .page-footer-space { 

                                    height: 50px; 

                        } 

 

                        .page-footer { 

                                    position: fixed; 

                                    bottom: 0; 

                                    width: 100%; 

                                    border-top: 1px solid black; 

                        } 

 

                        .page-header { 

                                    position: fixed; 

                                    top: 0mm; 

                                    width: 100%; 

                                    border-bottom: 1px solid black; 

                        } 

 

                        .page { 

                                    page-break-after: always; 

                                    margin-top: 80px; 

                        } 

        @@page { 

           margin: 20mm; 

        } 

 

                        @@media print { 

                                    thead { 

                                                display: table-header-group; 

                                    } 

 

                                    tfoot { 

                                                display: table-footer-group; 

                                    } 

 

                                    button { 

                                                display: none; 

                                    } 

 

                                    body { 

                                                margin: 0; 

                                    } 

                        } 

</style> 

 

The above elements and the CSS styles needs to be used to display the header and footer in the preview when printing alone. And the variable `headerValue` and the `footerValue` can be used to customize the header and footer content. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/160585/ze/RTE_Print_Header_Footer-531899421 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Query 2: Need to preview the “selected page size” when printing. 

 

Could you please share more information on this requirement? We suspect that you may expect the current page number of the print preview or the paper size of the print. Please share more details to validate your requirement. 

 

Regards, 

Revanth 

[yeadam]

Thank you very much

The code worked correctly

About the second request:

I meant the size of the paper

[Indrajith Srinivasan]

Hi Yeadam, 

 

Thanks for confirming, whether your reported requirements worked properly. 

 

Query: “I meant the size of the paper”  

 

The print page sizes can’t be configured from the Rich Text Editor, while printing the content. Instead, you can choose the desired page sizes in the print options(More settings) option before printing them. 

  

Regards, 

Indrajith