Pdf viewer annotation get and set automatically

[Vishal]

I want to get all notations and all changes that I have made up in syncfusion react pdf viewer . I send it to the backend and then set after I open the same pdf url i give him. and also change the userName in notation

[ArunKumar Chandrakesan]

Hi Vishal,

Kindly refer to the below sample provided below to export an annotation at the creation level, import an annotation during document loading, and update the annotation name when importing it.

Sample link: https://stackblitz.com/edit/react-mvfsfh-f3oxrg?file=index.js,index.css

Step to follow:

1. Run the sample

2. Add the annotation(free text annotation )

3.  The modification (annotation) made in the previous document will be imported when you load a new one.

4. A new annotation name is displayed in the comment section.

Let us know if the solution provided is helpful to you

Regards,

Arun kumar

[Vishal]

I have another problem that I want to export/import signature in pdf but when i open signature And add then

[Vishal]

and when I import annotations as json as you told I cannot edit or delete

   

   

   

   

[Vishal]

and the bigger problem is that  when i download the pdf with annotations the stamp will come but no text show

[ArunKumar Chandrakesan]

Hi Vishal,

Kindly find the details below

Queries

Details

Script error occurs while adding signature?

As the reported issue "Script error" was fixed in our latest version v20.2.0.49, Kindly update your version to resolve your issue and let us know if resolved

 

Packages:   

Service side package

ASP.NET Core :       https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows/  https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core.Linux/        https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core.OSX/               ASP.NET MVC:       https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Mvc5/       https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Mvc4/

 

   

 

CDN links:

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

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

 

Import annotations as json as you told I cannot edit or delete?

 

 

 

Imported annotations can be edited and changed, and if you want to turn off the edit mode while loading the document, use the Is Locked property. The modified sample is provided below. Please let us know if the solution was beneficial to you.

 

Sample link: https://stackblitz.com/edit/react-mvfsfh-bpebpl?file=index.js,index.css

 

Step to follow:

 

1. Run the sample

2. Add the annotation(free text annotation )

3.  The modification (annotation) made in the previous document will be imported and locked when you load a new one.

 

Let us know if the solution provided is helpful to you

 

 

 

 

when I download the pdf with annotations the stamp will come but no text show?

 

 

 

We are not clear with the statement Stamp will Come but no text showing. We had shared the sample and video replication in which we have tried to reproduce the issue

 

Sample link: https://stackblitz.com/edit/react-96qxnu?file=index.js

 

Video link: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video_Stamp46934115.zip

 

Kindly try this and revert to us with the 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

[Vishal]

Script error occurs while adding signature? this problem is not resolve after I switch the version 20.4.49 in react js

[Vishal]

Import annotations as json as you told I cannot edit or delete? this is also not working , I said that annotations are editable or delete when I import 

[Vishal]

when I download the pdf with annotations the stamp will come but no text show? the sample annotation json are

{

  "pdfAnnotation": {

    "0": {

      "textMarkupAnnotation": [

        {

          "TextMarkupAnnotationType": "Highlight",

          "AnnotationSelectorSettings": {

            "selectionBorderColor": "",

            "resizerBorderColor": "black",

            "resizerFillColor": "#FF4081",

            "resizerSize": 8,

            "selectionBorderThickness": 1,

            "resizerShape": "Square",

            "selectorLineDashArray": [],

            "resizerLocation": 3

          },

          "Author": "vishal kardam1",

          "ModifiedDate": "9/16/2022, 10:34:15 AM",

          "Subject": "Highlight",

          "Note": "Type Herehh",

          "Bounds": [

            {

              "Location": { "IsEmpty": false, "X": 45.828125, "Y": 166.171875 },

              "Size": "701.4903, 17",

              "X": 45.828125,

              "Y": 166.171875,

              "Width": 701.4903,

              "Height": 17.0,

              "Left": 45.828125,

              "Top": 166.171875,

              "Right": 747.3184,

              "Bottom": 183.171875,

              "IsEmpty": false

            }

          ],

          "Color": "#FFDF56",

          "Opacity": 1.0,

          "Rect": {

            "left": 45.828125,

            "top": 166.171875,

            "right": 747.3184,

            "bottom": 183.171875

          },

          "AnnotName": "f7bbe93c-9f74-41cc-d172-cda8e6608308",

          "Comments": null,

          "State": "",

          "StateModel": "",

          "AnnotType": "textMarkup",

          "CustomData": null,

          "IsMultiSelect": false,

          "AnnotNameCollection": null,

          "AnnotpageNumbers": null

        }

      ],

      "stampAnnotations": [

        {

          "StampAnnotationtype": "path",

          "Author": "chaitanya bondre",

          "pageNumber": 0,

          "AnnotationSelectorSettings": {

            "selectionBorderColor": "",

            "resizerBorderColor": "black",

            "resizerFillColor": "#FF4081",

            "resizerSize": 8,

            "selectionBorderThickness": 1,

            "resizerShape": "Square",

            "selectorLineDashArray": [],

            "resizerLocation": 3,

            "resizerCursorType": null

          },

          "Icon": 0,

          "matrix": null,

          "ModifiedDate": "9/14/2022, 6:02:22 PM",

          "CreationDate": null,

          "Subject": "Reviewed",

          "Note": "vishal kardam",

          "StrokeColor": "#dce3ef",

          "FillColor": "#192760",

          "Opacity": 1.0,

          "Apperarance": [

            {

              "type": "string",

              "text": "By chaitanya bondre at 6:02:12PM , 9/14/2022                       ",

              "currentFontname": "95b303ab-d397-438a-83af-e2ff8a9900f1",

              "baseFontName": "Helvetica-BoldOblique",

              "fontSize": 10,

              "isImport": true

            }

          ],

          "Rect": {

            "X": 77616.3,

            "Y": 170049.813,

            "Width": 500200.0,

            "Height": 293.333344,

            "Location": { "X": 77616.3, "Y": 170049.813 },

            "Size": {

              "IsEmpty": false,

              "Width": 500200.0,

              "Height": 293.333344

            },

            "Left": 77616.3,

            "Top": 170049.813,

            "Right": 577816.3,

            "Bottom": 170343.141

          },

          "RotateAngle": 0,

          "Name": null,

          "IsDynamic": true,

          "AnnotName": "d601684a-bb29-41f6-8e2d-efec6eb2a6df",

          "Comments": null,

          "State": "",

          "StateModel": "",

          "AnnotType": "stamp",

          "AnnotationSettings": {

            "minWidth": "30",

            "maxWidth": "500",

            "minHeight": "30",

            "maxHeight": "400",

            "isLock": "false",

            "isPrint": "true"

          },

          "CustomData": null

        },

        {

          "StampAnnotationtype": "path",

          "Author": "vishal kardam1",

          "pageNumber": 0,

          "AnnotationSelectorSettings": {

            "selectionBorderColor": "",

            "resizerBorderColor": "black",

            "resizerFillColor": "#FF4081",

            "resizerSize": 8,

            "selectionBorderThickness": 1,

            "resizerShape": "Square",

            "selectorLineDashArray": [],

            "resizerLocation": 3,

            "resizerCursorType": null

          },

          "Icon": 0,

          "matrix": null,

          "ModifiedDate": "9/14/2022, 6:10:24 PM",

          "CreationDate": null,

          "Subject": "Reviewed",

          "Note": "vishal",

          "StrokeColor": "#dce3ef",

          "FillColor": "#192760",

          "Opacity": 1.0,

          "Apperarance": [

            {

              "type": "string",

              "text": "                 ",

              "currentFontname": "95b303ab-d397-438a-83af-e2ff8a9900f1",

              "baseFontName": "Helvetica-BoldOblique",

              "fontSize": 10,

              "isImport": true

            }

          ],

          "Rect": {

            "X": 206860.984,

            "Y": 121649.977,

            "Width": 500200.0,

            "Height": 391.1111,

            "Location": { "X": 206860.984, "Y": 121649.977 },

            "Size": { "IsEmpty": false, "Width": 500200.0, "Height": 391.1111 },

            "Left": 206860.984,

            "Top": 121649.977,

            "Right": 707061.0,

            "Bottom": 122041.086

          },

          "RotateAngle": 0,

          "Name": null,

          "IsDynamic": true,

          "AnnotName": "4ad586a8-5f5a-44a4-f2e5-6bbba595da0a",

          "Comments": null,

          "State": "",

          "StateModel": "",

          "AnnotType": "stamp",

          "AnnotationSettings": {

            "minWidth": "30",

            "maxWidth": "500",

            "minHeight": "30",

            "maxHeight": "400",

            "isLock": "false",

            "isPrint": "true"

          },

          "CustomData": null

        }

      ],

      "freeTextAnnotation": [

        {

          "Author": "vishal kardam1",

          "AnnotationSelectorSettings": {

            "selectionBorderColor": "",

            "resizerBorderColor": "black",

            "resizerFillColor": "#FF4081",

            "resizerSize": 8,

            "selectionBorderThickness": 1,

            "resizerShape": "Square",

            "selectorLineDashArray": [],

            "resizerLocation": 3,

            "resizerCursorType": null

          },

          "MarkupText": "dddddddddddddd",

          "TextMarkupColor": null,

          "Color": {

            "IsEmpty": true,

            "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": 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

          },

          "Border": {

            "HorizontalRadius": 0.0,

            "VerticalRadius": 0.0,

            "Width": 1.0

          },

          "LineEndingStyle": "OpenArrow",

          "AnnotationFlags": "Default",

          "Text": "dddddddddddddd",

          "Opacity": 1.0,

          "CalloutLines": null,

          "ModifiedDate": "9/16/2022, 10:20:09 AM",

          "AnnotName": "7ae6be39-602d-4c57-533c-655294a29ea8",

          "AnnotType": "freeText",

          "Name": "7ae6be39-602d-4c57-533c-655294a29ea8",

          "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(255,255,255,0)",

          "FillColor": "rgba(255,255,255,0)",

          "Thickness": 1.0,

          "FontColor": "rgba(0,0,0,1)",

          "FontSize": 16.0,

          "FontFamily": "Helvetica",

          "FreeTextAnnotationType": "Text Box",

          "TextAlign": "Left",

          "Note": "dddddddddddddd",

          "CustomData": null,

          "AnnotationSettings": {

            "minWidth": "30",

            "maxWidth": "500",

            "minHeight": "30",

            "maxHeight": "400",

            "isLock": "false",

            "isPrint": "true"

          },

          "Bounds": {

            "X": 392.7078,

            "Y": 45.3428574,

            "Width": 151.0,

            "Height": 56.0470123,

            "Location": { "X": 392.7078, "Y": 45.3428574 },

            "Size": { "IsEmpty": false, "Width": 151.0, "Height": 56.0470123 },

            "Left": 392.7078,

            "Top": 45.3428574,

            "Right": 543.707764,

            "Bottom": 101.38987

          }

        }

      ]

    }

  }

}

[Vishal]

sir, I have also a problem is that The comments are not come when i reload the tab  and also how to export import signature in react pdf viewer

[Vishal]

here you can see that when I reload two or three times the pdf shows annotation in comment pannet and sometimes it doesn't

https://www.loom.com/share/7a93ea591e214f18bc20b483de634e9e

when I download pdf the text annotations are not see

https://www.loom.com/share/7a93ea591e214f18bc20b483de634e9e

here is my code...

import * as React from "react";

import {

Annotation,

BookmarkView,

FormFields,

Inject,

LinkAnnotation,

Magnification,

Navigation,

PdfViewerComponent,

Print,

TextSearch,

TextSelection,

ThumbnailView,

Toolbar,

} from "@syncfusion/ej2-react-pdfviewer";

import { enableRipple } from "@syncfusion/ej2-base";

import { toast } from "react-toastify";

var exportObject;

let tempAnnotation;

enableRipple(true);

export default class SyncfusionStamp extends React.Component {

constructor(props) {

super(props);

this.state = {

userName: "",

pdfUrl: "",

data: "",

loader: false,

annotations: {},

};

}

toastProperties = {

position: "top-center",

autoClose: 2000,

hideProgressBar: false,

closeOnClick: true,

pauseOnHover: true,

draggable: true,

progress: undefined,

toastId: "vishal",

};

baseUrl = "base_url";

syncFusionUrl = "https://localhost:44327/pdfviewer";

urlParams = new URLSearchParams(window.location.search);

pdfId = "proposal-62a3390693de8300cc1ac248-1";

// getPdf&Annotation

async GetPdfAnnotation() {

this.setState({

loader: true,

});

var requestOptions = {

method: "GET",

redirect: "follow",

};

await fetch(

this.baseUrl + "documentbyidsyncfusion/" + this.pdfId,

requestOptions

)

.then((response) => response.json())

.then(async (result) => {

this.setState({

pdfUrl: result.url,

data: result,

loader: false,

annotations: result.annotations,

});

var annotationData = JSON.parse(this.state.annotations.pdfAnnotation);

localStorage.setItem("annotation", JSON.stringify(annotationData));

exportObject = localStorage.getItem("annotation");

await this.importAnnotation();

})

.catch((error) => {

this.setState({

loader: false,

});

});

}

// import Annotation

async importAnnotation() {

if (localStorage.getItem("annotation")) {

var viewer = await document.getElementById("container").ej2_instances[0];

await viewer.importAnnotation(

JSON.parse(localStorage.getItem("annotation"))

);

}

}

// export Annotation

async exportAnnotation() {

this.setState({

loader: true,

});

var viewer = await document.getElementById("container").ej2_instances[0];

await viewer.exportAnnotationsAsObject().then(function (value) {

exportObject = value;

});

}

documentLoaded = async () => {

if (exportObject !== undefined) {

var viewer = document.getElementById("container").ej2_instances[0];

tempAnnotation = JSON.parse(exportObject);

tempAnnotation.pdfAnnotation[0].freeTextAnnotation[0].IsLocked = false;

viewer.importAnnotation(tempAnnotation);

}

};

componentDidMount() {

this.GetPdfAnnotation();

this.setState({ userName: this.props.token.user.name });

}

render() {

return (

className="d-flex justify-content-between align-items-center">

className="px-3">{this.state.data.name}

disabled={this.state.loader}

className="btn btn-primary btn-sm my-2"

onClick={() => this.exportAnnotation()}

>

Save Contract

className="btn btn-danger btn-sm my-2 mx-3"

onClick={() => {

this.GetPdfAnnotation();

setTimeout(

function () {

this.importAnnotation();

}.bind(this),

7000

);

this.importAnnotation();

}}

>

Reload Contract

{this.setState.loader ? (

<>

className="d-flex justify-content-center align-items-center"

style={{ height: "75vh", width: "100vw" }}

>

src="https://c.tenor.com/wXTO9bFFJXMAAAAM/loading-slow-internet.gif"

style={{ width: 100, height: 100 }}

/>

) : (

className="container-fluid">

ref={(scope) => {

this.viewer = scope;

}}

height={400}

isCommandPanelOpen={true}

isAnnotationToolbarVisible={true}

isSignatureEditable={true}

isDocumentEdited={true}

annotationAdd={this.exportAnnotation}

documentLoad={this.documentLoaded}

addSignature={this.addSignatureData}

annotationSettings={{

author: this.state.userName,

minHeight: 30,

maxHeight: 400,

minWidth: 30,

maxWidth: 500,

}}

id="container"

documentPath={

"PDF_Succinctly (66).pdf"

}

serviceUrl={this.syncFusionUrl}

style={{ height: "640px" }}

>

services={[

Toolbar,

Magnification,

Navigation,

Annotation,

LinkAnnotation,

BookmarkView,

ThumbnailView,

Print,

TextSelection,

TextSearch,

FormFields,

]}

/>

)}

);

}

}

[ArunKumar Chandrakesan]

Hi Vishal,

For some internal issue, we are updating it again and for your last query we will provide the solution on further updates

Querys	Details
Script error occurs while adding signature?	We were unable to reproduce the reported issue with the provided details. We have shared the sample and video replication in which we have tried to reproduce the issue in the below link, Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/signature688466971.zip   Sample link: https://stackblitz.com/edit/react-qddfus?file=index.js,package.json   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.
Import annotations as json as you told I cannot edit or delete?	We are not clear about your query and we suspect that you requirement is to prevent the annotation while importing it into the document. we have shared the documentation link and sample in the above update   Documentation link: https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSettings/   Kindly explain your requirement in detail so that we can help you further and resolve your issue at the earliest
I download the pdf with annotations the stamp will come but no text show?	As we analyze the provided JSON and find that the stamp annotation size and position seem to be large and when we try to import then it is larger than our viewport and for your reference we have provided the screenshot below    Kindly provide the sample and pdf document to further analysis on it
The comments are not come when i reload the tab ?	We were unable to reproduce the reported issue with the provided details. We have shared the sample and video replication in which we have tried to reproduce the issue in the below link, Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video_CommentPanel-1145536472.zip     Sample link: https://stackblitz.com/edit/react-mvfsfh-kt32nq?file=index.js,index.css   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.
How to export import signature in react pdf viewer?	You have created a similar ticket for this query. so Kindly follow it for more updates on it

Regards,

Arun kumar

[ArunKumar Chandrakesan]

Hi Vishal,

Kindly find the details below

Queries	Details
here you can see that when I reload two or three times the pdf shows annotation in the comment panel and sometimes it doesn't.	The given video seems to be wrong. Kindly check and update a valid video to reproduce the issue. However, we tried to reproduce the issue and found it woks as expected.
when I download the pdf the text annotations are not seen?	We were unable to reproduce the reported issue with the provided details. We have shared the sample and video replication in which we have tried to reproduce the issue in the below link, Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion_React_Sample_-_Google_Chrome_2022-09-19_18-46-3254251744.zip   Sample link:  https://stackblitz.com/edit/react-mvfsfh-shibhq?file=index.js,index.css   Kindly try this and revert to us with the modified sample, code snippet, replication procedure, and more details about the reported issue if you have any concerns.

Note: If you are still facing the issue, we will schedule a web meeting on these issues to analyze your code and provide a solution at the earliest. Kindly update your availability for the same.

Regards,

Arun kumar

[Vishal]

async Base64Pdf() {

    var pdfviewer = document.getElementById("container").ej2_instances[0];

    var r = await pdfviewer.saveAsBlob().then(function (value) {

      var testData = value;

      var a = document.createElement("a");

      document.body.appendChild(a);

      var url = window.URL.createObjectURL(testData);

      a.rel='nofollow' href = url;

      a.download = "PDF_Doc.pdf";

      // a.click();

      window.URL.revokeObjectURL(url);

      var reader = new FileReader();

      reader.readAsDataURL(testData);

      reader.onloadend = function () {

        var base64data = reader.result;

        // console.log(base64data);

        return base64data;

      };

      return reader.onloadend;

    });

    console.log("\n\nvishal", );

  }

I want to console and save base64 in state in react class component but I can't can you help me to figure

[Vishal]

sir, this will not work for me when I reload the pdf the annotations are come but not shows in comment pannel, this is my second last que

https://www.loom.com/share/f39033ceff8f4acea95fe10fe6980849

[ArunKumar Chandrakesan]

Hi Vishal,

Kindly find the details below

Query	Details
Console the base 64 and reload the base 64?	We have provided the sample below to render the blob into base64 and console the base64. Kindly let us know if the solution provide is helpful.   Stack Blitz: https://stackblitz.com/edit/react-ar8tgd?file=index.html
Comments are not shown in the viewer?	We were unable to reproduce the reported issue. We have shared the sample and screenshot in which we tried to reproduce the issue. Screenshot:   Sample link :https://stackblitz.com/edit/react-jca3xb?file=index.js,package.json   Kindly try this and revert to us with a modified sample, code snippet, replication procedure and more details about the issue if you have any concerns. This will be helpful for us to analyze further and provide the solutions.   Note: If you are still facing the issue, we will schedule a web meeting on these issues to analyze your code and provide a solution at the earliest. Kindly update your availability for the same.

Regards,

Arun kumar