Ability to save a constant header across multiple documents in Syncfusion PDF Editor (Angular)

[Dinesh Kumar]

Hi Team,

We are using the Syncfusion PDF Viewer/Editor component in an Angular application.

We have a requirement to include a constant/static header (e.g., logo, organization name, document title) across all templates or edited documents. This header should ideally appear on every page of the document and be automatically included when saving or downloading the document.

We would like to know:

1. Is there currently a feature that allows defining and storing a constant header template in the Syncfusion PDF Editor?

2. Can this header be saved as part of the document when users edit and save/download?

3. If not directly supported, do you recommend any workaround (e.g., injecting headers via code or API)?

Our goal is to maintain branding consistency across documents created or edited using the Syncfusion PDF Editor.

Thanks in advance for your support.

Best regards,
Dinesh Kumar

[Venkada Subramanian Durai]

Hi Dinesh Kumar,

We have prepared the sample based on your requirements. In the provided sample, we have used a custom toolbar item for the Download functionality by removing the default download button using the toolbarSettings API. On clicking the custom toolbar item, using the toolbarClick API, we use the EJ2 PDF Library to add a header with an image and text to every page of the PDF document before saving it.

We have also attached a video for your reference. Please check whether it meets your requirements and feel free to reach out if you have any queries.

 

Code snippet:

//define custom toolbar item

 public save: CustomToolbarItemModel = {

   prefixIcon: 'e-icons e-save',

   id: 'save',

   tooltipText: 'Add header and save',

   align: 'right',

 };

 

 //add required toolbar items with custom toolbaritem

 public toolbarSettings = {

   showTooltip: true,

   toolbarItems: [

     'OpenOption',

     'PageNavigationTool',

     'MagnificationTool',

     'PanTool',

     'SelectionTool',

     'SearchOption',

     'PrintOption',

     //   'DownloadOption',

     'UndoRedoTool',

     'AnnotationEditTool',

     'FormDesignerEditTool',

     'CommentTool',

     'SubmitForm',

     this.save,

   ],

 };

 

 //toolbar click event

 public toolbarClick(args): void {

   if (args.item.id === 'save') {

     this.pdfviewerControl.saveAsBlob().then((value) => {

       const reader = new FileReader();

       reader.readAsDataURL(value);

       reader.onload = () => {

         const base64data = reader.result as string;

         const pureBase64 = base64data.replace(

           /^data:application\/pdf;base64,/,

           ''

         );

         let updated = this.drawHeaderTemplate(pureBase64);

         //console.log(base64data);

         // Load the document from base64 string

         //this.pdfviewerControl.load(updated, null);

       };

     });

   }

 }

Sample with add header on every pages before save

Demo for add header on every pages before save

Documentation for Primary toolbar customization using toolbarSettings

Regards,

Venkada Subramanian Durai