1. Home
  2. Forum
  3. Angular - EJ 2
  4. Exported freetext Annotations arabic letters get messed up

Exported freetext Annotations arabic letters get messed up

Hello , I'm using the angular 'pdfviewerControl.exportAnnotationsAsObject()' function the export annotation pdfviewer controller API returns the following base64 string 

eyJwZGZBbm5vdGF0aW9uIjp7IjAiOnsiZnJlZVRleHRBbm5vdGF0aW9uIjpbeyJBdXRob3IiOiJHdWVzdCIsIkFubm90YXRpb25TZWxlY3RvclNldHRpbmdzIjp7InNlbGVjdGlvbkJvcmRlckNvbG9yIjoiIiwicmVzaXplckJvcmRlckNvbG9yIjoiYmxhY2siLCJyZXNpemVyRmlsbENvbG9yIjoiI0ZGNDA4MSIsInJlc2l6ZXJTaXplIjo4LCJzZWxlY3Rpb25Cb3JkZXJUaGlja25lc3MiOjEsInJlc2l6ZXJTaGFwZSI6IlNxdWFyZSIsInNlbGVjdG9yTGluZURhc2hBcnJheSI6W10sInJlc2l6ZXJMb2NhdGlvbiI6M30sIk1hcmt1cFRleHQiOiLYs9mK2KjYs9mK2KgiLCJUZXh0TWFya3VwQ29sb3IiOm51bGwsIkNvbG9yIjp7IklzRW1wdHkiOmZhbHNlLCJCIjoyNTUsIkJsdWUiOjEuMCwiQyI6MC4wLCJHIjoyNTUsIkdyZWVuIjoxLjAsIkdyYXkiOjEuMCwiSyI6MC4wLCJNIjowLjAsIlIiOjI1NSwiUmVkIjoxLjAsIlkiOjAuMH0sIkZvbnQiOnsiRm9udEZhbWlseSI6MCwiTmFtZSI6IkhlbHZldGljYSIsIlNpemUiOjE4LjAsIkhlaWdodCI6MjAuODA4MDAyLCJTdHlsZSI6MCwiQm9sZCI6ZmFsc2UsIkl0YWxpYyI6ZmFsc2UsIlN0cmlrZW91dCI6ZmFsc2UsIlVuZGVybGluZSI6ZmFsc2V9LCJCb3JkZXJDb2xvciI6eyJJc0VtcHR5Ijp0cnVlLCJCIjoxODcsIkJsdWUiOjAuNzMzMzMzMzUsIkMiOjEuMCwiRyI6MCwiR3JlZW4iOjAuMCwiR3JheSI6MC4yNDQ0NDQ0NCwiSyI6MC4yNjY2NjY2NSwiTSI6MS4wLCJSIjowLCJSZWQiOjAuMCwiWSI6MC4wfSwiQm9yZGVyIjp7Ikhvcml6b250YWxSYWRpdXMiOjAuMCwiVmVydGljYWxSYWRpdXMiOjAuMCwiV2lkdGgiOjEuMH0sIkxpbmVFbmRpbmdTdHlsZSI6Ik9wZW5BcnJvdyIsIkFubm90YXRpb25GbGFncyI6IkRlZmF1bHQiLCJUZXh0Ijoi2LPZitio2LPZitioIiwiT3BhY2l0eSI6MS4wLCJDYWxsb3V0TGluZXMiOm51bGwsIk1vZGlmaWVkRGF0ZSI6IjgvNy8yMDIyLCAxMjoxNDoxOSBBTSIsIkFubm90TmFtZSI6IjI4Nzk1NTg5LWU0N2QtNGMwMS03Zjc1LWJlNGJhM2E2Y2VmOSIsIkFubm90VHlwZSI6ImZyZWVUZXh0IiwiTmFtZSI6IjI4Nzk1NTg5LWU0N2QtNGMwMS03Zjc1LWJlNGJhM2E2Y2VmOSIsIkNvbW1lbnRzIjpudWxsLCJBbm5vdGF0aW9uSW50ZW50IjpudWxsLCJDcmVhdGVkRGF0ZSI6bnVsbCwiRmxhdHRlbiI6ZmFsc2UsIkZsYXR0ZW5Qb3B1cHMiOmZhbHNlLCJJbm5lckNvbG9yIjpudWxsLCJMYXllciI6bnVsbCwiTG9jYXRpb24iOm51bGwsIlBhZ2UiOm51bGwsIlBhZ2VUYWdzIjpudWxsLCJSZXZpZXdIaXN0b3J5IjpudWxsLCJSb3RhdGUiOjAsIlN1YmplY3QiOiJUZXh0IEJveCIsIlN0YXRlIjoiVW5tYXJrZWQiLCJTdGF0ZU1vZGVsIjoiTm9uZSIsIlN0cm9rZUNvbG9yIjoicmdiYSgwLDAsMTg3LDApIiwiRmlsbENvbG9yIjoicmdiYSgyNTUsMjU1LDI1NSwxKSIsIlRoaWNrbmVzcyI6MS4wLCJGb250Q29sb3IiOiJyZ2JhKDAsMCwwLDEpIiwiRm9udFNpemUiOjE4LjAsIkZvbnRGYW1pbHkiOiJIZWx2ZXRpY2EiLCJGcmVlVGV4dEFubm90YXRpb25UeXBlIjoiVGV4dCBCb3giLCJUZXh0QWxpZ24iOiJDZW50ZXIiLCJOb3RlIjoi2LPZitio2LPZitioIiwiQ3VzdG9tRGF0YSI6bnVsbCwiQW5ub3RhdGlvblNldHRpbmdzIjp7ImlzTG9jayI6InRydWUifSwiQm91bmRzIjp7IlgiOjM2Mi4wLCJZIjo4MDMuMCwiV2lkdGgiOjE1MS4wLCJIZWlnaHQiOjI0LjYsIkxvY2F0aW9uIjp7IlgiOjM2Mi4wLCJZIjo4MDMuMH0sIlNpemUiOnsiSXNFbXB0eSI6ZmFsc2UsIldpZHRoIjoxNTEuMCwiSGVpZ2h0IjoyNC42fSwiTGVmdCI6MzYyLjAsIlRvcCI6ODAzLjAsIlJpZ2h0Ijo1MTMuMCwiQm90dG9tIjo4MjcuNn19XX19fQ==

But the json Object I receive at in the angular function mentioned above is the following 

{"pdfAnnotation":{"0":{"freeTextAnnotation":[{"Author":"Guest","AnnotationSelectorSettings":{"selectionBorderColor":"","resizerBorderColor":"black","resizerFillColor":"#FF4081","resizerSize":8,"selectionBorderThickness":1,"resizerShape":"Square","selectorLineDashArray":[],"resizerLocation":3},"MarkupText":"شسيسيبسيب","TextMarkupColor":null,"Color":{"IsEmpty":false,"B":255,"Blue":1.0,"C":0.0,"G":255,"Green":1.0,"Gray":1.0,"K":0.0,"M":0.0,"R":255,"Red":1.0,"Y":0.0},"Font":{"FontFamily":0,"Name":"Helvetica","Size":16.0,"Height":18.496,"Style":0,"Bold":false,"Italic":false,"Strikeout":false,"Underline":false},"BorderColor":{"IsEmpty":true,"B":187,"Blue":0.73333335,"C":1.0,"G":0,"Green":0.0,"Gray":0.24444444,"K":0.26666665,"M":1.0,"R":0,"Red":0.0,"Y":0.0},"Border":{"HorizontalRadius":0.0,"VerticalRadius":0.0,"Width":1.0},"LineEndingStyle":"OpenArrow","AnnotationFlags":"Default","Text":"شسيسيبسيب","Opacity":1.0,"CalloutLines":null,"ModifiedDate":"8/7/2022, 12:08:27 AM","AnnotName":"eb2e2555-e679-45a3-a8fe-2c55b5b6bf18","AnnotType":"freeText","Name":"eb2e2555-e679-45a3-a8fe-2c55b5b6bf18","Comments":null,"AnnotationIntent":null,"CreatedDate":null,"Flatten":false,"FlattenPopups":false,"InnerColor":null,"Layer":null,"Location":null,"Page":null,"PageTags":null,"ReviewHistory":null,"Rotate":0,"Subject":"Text Box","State":"Unmarked","StateModel":"None","StrokeColor":"rgba(0,0,187,0)","FillColor":"rgba(255,255,255,1)","Thickness":1.0,"FontColor":"rgba(0,0,0,1)","FontSize":16.0,"FontFamily":"Helvetica","FreeTextAnnotationType":"Text Box","TextAlign":"Center","Note":"شسيسيبسيب","CustomData":null,"AnnotationSettings":{"isLock":"true"},"Bounds":{"X":227.0,"Y":532.0,"Width":151.0,"Height":24.6,"Location":{"X":227.0,"Y":532.0},"Size":{"IsEmpty":false,"Width":151.0,"Height":24.6},"Left":227.0,"Top":532.0,"Right":378.0,"Bottom":556.6}}]}}}


As you can see n the returned object all the Arabic letters (bolded) is badly encoded Although if we used any base64 encoder will be correctly encoded 

{"pdfAnnotation":{"0":{"freeTextAnnotation":[{"Author":"Guest","AnnotationSelectorSettings":{"selectionBorderColor":"","resizerBorderColor":"black","resizerFillColor":"#FF4081","resizerSize":8,"selectionBorderThickness":1,"resizerShape":"Square","selectorLineDashArray":[],"resizerLocation":3},"MarkupText":"سيبسيب","TextMarkupColor":null,"Color":{"IsEmpty":false,"B":255,"Blue":1.0,"C":0.0,"G":255,"Green":1.0,"Gray":1.0,"K":0.0,"M":0.0,"R":255,"Red":1.0,"Y":0.0},"Font":{"FontFamily":0,"Name":"Helvetica","Size":18.0,"Height":20.808002,"Style":0,"Bold":false,"Italic":false,"Strikeout":false,"Underline":false},"BorderColor":{"IsEmpty":true,"B":187,"Blue":0.73333335,"C":1.0,"G":0,"Green":0.0,"Gray":0.24444444,"K":0.26666665,"M":1.0,"R":0,"Red":0.0,"Y":0.0},"Border":{"HorizontalRadius":0.0,"VerticalRadius":0.0,"Width":1.0},"LineEndingStyle":"OpenArrow","AnnotationFlags":"Default","Text":"سيبسيب","Opacity":1.0,"CalloutLines":null,"ModifiedDate":"8/7/2022, 12:14:19 AM","AnnotName":"28795589-e47d-4c01-7f75-be4ba3a6cef9","AnnotType":"freeText","Name":"28795589-e47d-4c01-7f75-be4ba3a6cef9","Comments":null,"AnnotationIntent":null,"CreatedDate":null,"Flatten":false,"FlattenPopups":false,"InnerColor":null,"Layer":null,"Location":null,"Page":null,"PageTags":null,"ReviewHistory":null,"Rotate":0,"Subject":"Text Box","State":"Unmarked","StateModel":"None","StrokeColor":"rgba(0,0,187,0)","FillColor":"rgba(255,255,255,1)","Thickness":1.0,"FontColor":"rgba(0,0,0,1)","FontSize":18.0,"FontFamily":"Helvetica","FreeTextAnnotationType":"Text Box","TextAlign":"Center","Note":"سيبسيب","CustomData":null,"AnnotationSettings":{"isLock":"true"},"Bounds":{"X":362.0,"Y":803.0,"Width":151.0,"Height":24.6,"Location":{"X":362.0,"Y":803.0},"Size":{"IsEmpty":false,"Width":151.0,"Height":24.6},"Left":362.0,"Top":803.0,"Right":513.0,"Bottom":827.6}}]}}}

I need help to get the annotation correctly decoded

Thanks,
Mohamed


6 Replies
AC ArunKumar Chandrakesan Syncfusion Team August 8, 2022 03:36 PM UTC

Hi Mohamed,


Exporting an Arabic text using exportAsObject() generates an unicode as shown in the below screenshot. This differs from your content. We have shared the sample in which we tried to reproduce the issue, for your reference. We need to validate it further and get back to you with more details on August 11, 2022.


However, we want to know that if you import back the exported data, do you get the correct Arabic text back in your document? If so, are you trying to use the exported JSON data somewhere else?



StackBlitz : https://stackblitz.com/edit/angular-wxxxwb?file=app.component.ts,app.component.html



Regards,

Arun Kumar


AC ArunKumar Chandrakesan Syncfusion Team August 11, 2022 12:53 PM UTC

Hi Mohamed,


As we get the Arabic character as Unicode value from the exportAnnotationAsObject method. So, We need to decode the Unicode value to character, and this will resolve the issue. As a workaround use the below code in exportAnnotationAsObject method to resolve this issue and for your reference we have provide the screenshot and sample below  and let us know if the update provided is helpful to you.


Code snippet:

     var jsonData = JSON.parse(value);

      console.log(jsonData);

      var jsonstring=JSON.stringify(jsonData);

      console.log(jsonstring);


Output:




Sample link : https://stackblitz.com/edit/angular-bffssz?file=app.component.html,app.component.ts


However , we will include the code in source level to resolve this issue and the fix will be available on August 24th , weekly release.


Regards,

Arun Kumar


MO Mohamed August 20, 2022 12:44 PM UTC

Hello Arun,


This is the C# service I use for exporting the annotations , Do I have to change anything in it  as I don't receive Unicode characters I receive something like that " شسيسيبسيب " 

 [AcceptVerbs("Post")]

        [HttpPost("ExportAnnotations")]

        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]

        [Route("[controller]/ExportAnnotations")]

        //Post action to export annotations

        public IActionResult ExportAnnotations([FromBody] Dictionary<string, string> jsonObject)

        {

            PdfRenderer pdfviewer = new PdfRenderer(_cache);

            string jsonResult = pdfviewer.GetAnnotations(jsonObject);

            return Content(jsonResult);

        }

Thankss


AC ArunKumar Chandrakesan Syncfusion Team August 24, 2022 08:59 AM UTC

Hi Mohamed,

 

The issue was fixed in our latest version v20.2.0.45.Kindly update your version to resolve your issue and let us know if resolved

   

Packages:   

 

   

 

CDN links:

https://cdn.syncfusion.com/ej2/20.2.45/dist/ej2.min.js

https://cdn.syncfusion.com/ej2/20.2.45/material.css

 

Regards,

Arun Kumar


MO Mohamed September 28, 2022 10:10 PM UTC

Hello , 

I get this  error when I upgraded to latest syncfusion version ( 20.2.0.45 ) while using the export Annotations function 

 public IActionResult ExportAnnotations([FromBody] Dictionary<string, string> jsonObject)

        {

            PdfRenderer pdfviewer = new PdfRenderer(_cache);

            string jsonResult = pdfviewer.ExportAnnotation(jsonObject);

            return Content(jsonResult);

        }

"The given key 'annotationDataFormat' was not present in the dictionary

I'm using angular syncfuion versions for UI 
This is my package.json 

"@syncfusion/ej2-angular-buttons": "^18.1.52",

    "@syncfusion/ej2-angular-calendars": "^18.3.48",

    "@syncfusion/ej2-angular-dropdowns": "^18.1.46",

    "@syncfusion/ej2-angular-inputs": "^18.1.53",

    "@syncfusion/ej2-angular-lists": "^18.1.46",

    "@syncfusion/ej2-angular-maps": "^19.4.53",

    "@syncfusion/ej2-angular-navigations": "^18.1.57",

    "@syncfusion/ej2-angular-pdfviewer": "18.1.55",


Thanks,
Mohamed


AC ArunKumar Chandrakesan Syncfusion Team September 29, 2022 04:09 PM UTC

Hi Mohamed,


We were unable to reproduce the reported issue with the provided details. We have shared the sample in which we have tried to reproduce the issue in the below link,


Stack blitz link: https://stackblitz.com/edit/angular-wxxxwb-s2lywo?file=app.component.ts,package.json,app.component.html

Web services: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Web_Service-211440710.zip

Step to follow:


  1. Run the web services first.
  2. Copy the created URL
  3. Place the URL in the service URL field of the stack blitz.



Kindly try this and revert to us with modified sample, code snippet, replication procedure and more details about the reported issue if you have any concerns. This will be helpful for us to analyze further and provide the details.


 Regards,

Arun kumar


Loader.
Up arrow icon