Get the annotation data (exported values)

I need to save the annotation data. when I use 

viewer.exportAnnotationsAsObject().then(function(value) {
console.log(value)
})


like this. it not showing anything. 
(This is in next js)

full code: 

"use client";
import React, { useEffect, useState } from "react";
import {
Annotation,
Inject,
LinkAnnotation,
PdfViewerComponent,
Toolbar,
} from "@syncfusion/ej2-react-pdfviewer";
import { registerLicense } from "@syncfusion/ej2-base";

registerLicense(process.env.NEXT_PUBLIC_SYNCFUSION_LICENSE_KEY || "");

export function App(): JSX.Element {
const [isClient, setIsClient] = useState(false);

useEffect(() => {
setIsClient(true);
}, []);

const data = {
pdfAnnotation: {
"0": {
shapeAnnotation: [
{
type: "Ink",
page: "0",
rect: { x: "293.25", y: "559.5", width: "399", height: "732.75" },
color: "#FF0000",
title: "Guest",
subject: "Ink",
date: "02/27/2024 18:33:57",
flags: "print",
name: "ee98ceeb-d93d-4acb-6b89-ae5f6cff44cb",
rotation: "0",
inklist: {
gesture: [
[
357.75, 626.25, 357.75, 626.25, 357.75, 628.5, 357.75, 630.75,
357.75, 634.5, 357.75, 645, 357.75, 660.75, 357.75, 676.5,
357.75, 696,
],
[
390, 732.75, 390, 732.75, 390.75, 729.75, 391.5, 727.5, 393,
719.25, 395.25, 708, 398.25, 696, 399, 684, 399, 673.5, 399,
661.5, 399, 654.75, 399, 648.75, 399, 642.75, 398.25, 638.25,
397.5, 635.25,
],
[
348, 657, 348, 657, 348.75, 657, 350.25, 657, 352.5, 658.5,
356.25, 660, 361.5, 663, 365.25, 664.5, 368.25, 666.75,
372.75, 669, 377.25, 671.25, 381, 672.75,
],
[
380.25, 720.75, 380.25, 720.75, 380.25, 718.5, 380.25, 715.5,
380.25, 711.75, 381.75, 696.75, 384, 679.5, 386.25, 659.25,
390, 637.5, 393.75, 615.75, 396, 597, 398.25, 582.75, 399,
573.75, 399, 570.75,
],
[
365.25, 723.75, 365.25, 723.75, 366, 721.5, 366.75, 717.75,
369, 706.5, 371.25, 692.25, 374.25, 675.75, 376.5, 660,
377.25, 642.75, 380.25, 627.75, 381, 615, 381.75, 606.75,
383.25, 597.75, 384, 591, 386.25, 584.25, 386.25, 582,
],
[
328.5, 718.5, 328.5, 718.5, 329.25, 717, 329.25, 714.75,
331.5, 705, 333.75, 687.75, 335.25, 671.25, 336, 651.75, 336,
633, 336, 615, 337.5, 600.75, 337.5, 585.75, 338.25, 573.75,
339.75, 567, 340.5, 561.75, 340.5, 560.25, 341.25, 559.5,
],
[
309, 657, 309, 657, 311.25, 657.75, 314.25, 660, 317.25,
660.75, 321, 660.75, 324.75, 661.5, 328.5, 663.75, 335.25,
665.25, 339.75, 667.5, 342.75, 669, 344.25, 669.75, 345.75,
671.25, 347.25, 672, 348.75, 673.5, 350.25, 675.75, 352.5,
677.25, 354, 679.5, 354.75, 680.25, 356.25, 681.75,
],
[
293.25, 624, 293.25, 624, 294, 624, 295.5, 624, 299.25,
624.75, 302.25, 626.25, 304.5, 627, 308.25, 627.75, 312.75,
630, 320.25, 631.5, 330, 633.75, 339.75, 636.75, 348, 636.75,
356.25, 639.75, 367.5, 641.25, 375.75, 642.75, 383.25, 643.5,
387.75, 644.25,
],
],
},
width: "1",
},
{
type: "Text",
page: "0",
State: "Unmarked",
StateModel: "Review",
inreplyto: "ee98ceeb-d93d-4acb-6b89-ae5f6cff44cb",
flags: "hidden,print,nozoom,norotate",
rect: { x: "0", y: "792", width: "0", height: "792" },
},
{
type: "Ink",
page: "0",
rect: { x: "198.75", y: "513", width: "198.75", height: "513" },
color: "#FF0000",
title: "Guest",
subject: "Ink",
date: "02/27/2024 18:35:33",
flags: "print",
name: "0905f5e1-4111-4bc6-79df-d7b0a7ef5505",
rotation: "0",
inklist: { gesture: [[]] },
width: "1",
},
{
type: "Text",
page: "0",
State: "Unmarked",
StateModel: "Review",
inreplyto: "0905f5e1-4111-4bc6-79df-d7b0a7ef5505",
flags: "hidden,print,nozoom,norotate",
rect: { x: "0", y: "792", width: "0", height: "792" },
},
{},
{
type: "Ink",
page: "1",
rect: { x: "81.75", y: "517.5", width: "505.5", height: "720.75" },
color: "#FF0000",
title: "Guest",
subject: "Ink",
date: "02/27/2024 18:34:07",
flags: "print",
name: "1657969b-c162-409b-9b6d-24fcea0deaac",
rotation: "0",
inklist: {
gesture: [
[
422.25, 701.25, 422.25, 701.25, 423.75, 609.75, 425.25,
597.75, 426, 582.75, 427.5, 567.75, 427.5, 555, 427.5, 544.5,
427.5, 534.75, 428.25, 526.5, 428.25, 521.25, 428.25, 520.5,
428.25, 519, 428.25, 518.25, 428.25, 517.5, 428.25, 517.5,
427.5, 517.5, 426.75, 518.25,
],
[
503.25, 675, 503.25, 675, 503.25, 666.75, 503.25, 661.5,
503.25, 654.75, 503.25, 645, 504.75, 635.25, 504.75, 619.5,
504.75, 605.25, 504.75, 594.75, 504.75, 583.5, 504.75, 576.75,
504.75, 570, 504.75, 564.75, 504.75, 563.25, 504.75, 561.75,
504.75, 560.25, 504.75, 558.75, 504.75, 557.25, 504.75,
555.75, 504.75, 555, 504.75, 553.5, 504.75, 552.75, 504.75,
552, 504.75, 551.25, 505.5, 551.25, 505.5, 550.5,
],
[
81.75, 552.75, 81.75, 552.75, 82.5, 552.75, 83.25, 555, 86.25,
556.5, 88.5, 558.75, 91.5, 561.75, 98.25, 568.5, 108.75,
579.75, 122.25, 591.75, 136.5, 603.75, 154.5, 616.5, 172.5,
630, 192.75, 644.25, 213, 657.75, 233.25, 669.75, 254.25,
680.25, 273, 690, 290.25, 698.25, 304.5, 704.25, 316.5,
710.25, 327, 714.75, 333, 717.75, 335.25, 718.5, 336.75, 720,
337.5, 720, 338.25, 720.75, 338.25, 720.75, 338.25, 720.75,
],
[
235.5, 714, 235.5, 714, 238.5, 705, 241.5, 691.5, 243.75,
678.75, 246, 663.75, 247.5, 651.75, 247.5, 642, 247.5, 633.75,
247.5, 630.75, 246.75, 630.75, 246, 630.75,
],
[
217.5, 715.5, 217.5, 715.5, 221.25, 708.75, 225.75, 695.25,
230.25, 678.75, 234, 660.75, 237.75, 641.25, 241.5, 623.25,
243.75, 609.75, 245.25, 597, 245.25, 588, 245.25, 582.75, 243,
582, 243, 581.25, 242.25, 581.25, 241.5, 581.25, 239.25,
582.75, 237.75, 583.5,
],
[
205.5, 686.25, 205.5, 686.25, 210, 677.25, 216, 661.5, 221.25,
643.5, 224.25, 629.25, 227.25, 614.25, 228, 601.5, 229.5,
592.5, 228, 590.25, 227.25, 590.25, 227.25, 590.25, 224.25,
592.5, 221.25, 596.25, 213, 606.75, 201, 621.75,
],
[
138, 720, 138, 720, 143.25, 710.25, 147.75, 698.25, 152.25,
681.75, 158.25, 660.75, 163.5, 639.75, 167.25, 615.75, 169.5,
597.75, 171.75, 582, 173.25, 572.25, 173.25, 571.5, 172.5,
571.5, 171.75, 573, 170.25, 575.25, 167.25, 579, 164.25,
586.5, 157.5, 597.75,
],
[
123, 661.5, 123, 661.5, 129, 645, 134.25, 627, 138.75, 605.25,
143.25, 581.25, 147, 561, 150.75, 543.75, 152.25, 534, 152.25,
531.75, 150.75, 532.5, 147.75, 537, 145.5, 543.75, 138,
555.75, 128.25, 575.25, 119.25, 595.5,
],
[
92.25, 669.75, 92.25, 669.75, 96.75, 662.25, 103.5, 650.25,
110.25, 634.5, 117.75, 618.75, 125.25, 600.75, 129.75, 586.5,
135.75, 570.75, 141.75, 558, 146.25, 548.25, 149.25, 543,
149.25, 542.25,
],
],
},
width: "1",
},
{
type: "Text",
page: "1",
State: "Unmarked",
StateModel: "Review",
inreplyto: "1657969b-c162-409b-9b6d-24fcea0deaac",
flags: "hidden,print,nozoom,norotate",
rect: { x: "0", y: "792", width: "0", height: "792" },
},
{},
{},
{},
{
type: "Ink",
page: "2",
rect: { x: "84.75", y: "510.75", width: "552.75", height: "718.5" },
color: "#FF0000",
title: "Guest",
subject: "Ink",
date: "02/27/2024 18:34:37",
flags: "print",
name: "d8bd0c17-5cd3-4883-388c-2fa2e25d62ef",
rotation: "0",
inklist: {
gesture: [
[
221.25, 654.75, 221.25, 654.75, 264.75, 567.75, 273, 552.75,
281.25, 537.75, 288.75, 525.75, 294, 517.5, 295.5, 515.25,
297, 513.75, 297.75, 512.25, 298.5, 511.5, 299.25, 510.75,
],
[
341.25, 701.25, 341.25, 701.25, 341.25, 696.75, 341.25, 693,
341.25, 687.75, 341.25, 684.75, 341.25, 680.25, 341.25,
675.75, 341.25, 670.5, 341.25, 666, 341.25, 663.75, 341.25,
660.75, 341.25, 656.25, 341.25, 651.75, 341.25, 648.75,
341.25, 645.75, 341.25, 642, 341.25, 639, 342, 635.25, 342,
633, 342.75, 630, 342.75, 626.25, 342.75, 624, 344.25, 620.25,
344.25, 615.75, 344.25, 613.5, 344.25, 612, 344.25, 609.75,
344.25, 608.25, 344.25, 606.75, 344.25, 605.25, 345, 603.75,
345, 603, 345, 601.5, 345, 600.75, 345.75, 600, 345.75, 598.5,
345.75, 597.75, 345.75, 597, 345.75, 596.25, 345.75, 595.5,
345.75, 594.75, 345.75, 594.75, 345.75, 594, 345.75, 593.25,
345.75, 592.5, 345.75, 592.5,
],
[
304.5, 639, 304.5, 639, 305.25, 633.75, 307.5, 627.75, 311.25,
615.75, 314.25, 604.5, 318, 593.25, 324, 579, 329.25, 565.5,
332.25, 554.25, 335.25, 546, 338.25, 539.25, 338.25, 537.75,
339.75, 536.25, 339.75, 535.5, 339.75, 534.75,
],
[
278.25, 647.25, 278.25, 647.25, 279.75, 645, 282.75, 641.25,
284.25, 639, 286.5, 633.75, 290.25, 626.25, 295.5, 615, 300,
603.75, 305.25, 594, 309.75, 582.75, 314.25, 573.75, 317.25,
567, 320.25, 559.5, 322.5, 553.5, 323.25, 551.25, 323.25,
549.75, 323.25, 548.25,
],
[
251.25, 680.25, 251.25, 680.25, 251.25, 678.75, 251.25,
675.75, 252, 672, 253.5, 663, 254.25, 653.25, 255, 640.5,
256.5, 628.5, 257.25, 616.5, 258.75, 605.25, 260.25, 596.25,
261, 589.5, 261.75, 585, 261.75, 582.75, 261.75, 581.25,
261.75, 579.75, 261.75, 579, 261.75, 578.25, 260.25, 576.75,
],
[
240, 545.25, 240, 545.25, 238.5, 545.25, 236.25, 545.25, 231,
545.25, 226.5, 545.25, 215.25, 548.25, 199.5, 554.25, 186,
560.25, 170.25, 568.5, 155.25, 578.25, 141.75, 588, 128.25,
600, 117.75, 610.5, 108, 622.5, 102, 631.5, 98.25, 640.5, 96,
651, 96, 662.25, 98.25, 672.75, 104.25, 681.75, 110.25,
687.75, 120.75, 693.75, 132.75, 696.75, 143.25, 698.25,
155.25, 696.75, 169.5, 693.75, 182.25, 688.5, 197.25, 678.75,
207.75, 670.5, 219.75, 660, 231.75, 646.5, 243.75, 630, 252,
614.25, 258, 601.5, 262.5, 590.25, 266.25, 578.25, 267, 570,
267, 567.75, 266.25, 566.25, 263.25, 564, 261.75, 563.25,
259.5, 563.25, 255, 563.25, 249.75, 564, 238.5, 567.75,
224.25, 575.25, 208.5, 583.5, 195, 591.75, 183, 600.75, 172.5,
609.75, 165, 618.75, 160.5, 625.5, 156.75, 633.75, 156, 643.5,
156.75, 651.75, 162, 659.25, 167.25, 663.75, 174.75, 668.25,
187.5, 670.5, 200.25, 670.5, 216, 666.75, 228, 660.75, 241.5,
651.75, 252, 642, 261.75, 630, 269.25, 618, 273.75, 606,
277.5, 595.5, 278.25, 585.75, 278.25, 574.5, 278.25, 567,
275.25, 561.75, 272.25, 558.75, 266.25, 555.75, 254.25, 553.5,
237.75, 553.5, 221.25, 557.25, 201.75, 561.75, 181.5, 570.75,
162, 579.75, 141.75, 591.75, 123.75, 603, 108, 615, 97.5,
625.5, 90, 633.75, 86.25, 639, 84.75, 642.75, 85.5, 646.5,
87.75, 651, 96, 657.75, 108, 663.75, 126, 667.5, 144, 669.75,
165.75, 669, 186, 665.25, 201.75, 660.75, 218.25, 653.25, 234,
643.5, 246, 633.75, 255.75, 625.5, 262.5, 618.75, 265.5,
614.25, 267.75, 609.75, 269.25, 605.25, 270, 600.75, 270,
598.5, 269.25, 596.25, 267.75, 594, 264, 590.25, 261, 588,
256.5, 585, 254.25, 583.5, 251.25, 582.75, 248.25, 582.75,
246, 582.75, 243.75, 582.75, 242.25, 583.5, 240.75, 584.25,
],
[
372.75, 684.75, 372.75, 684.75, 372.75, 683.25, 372.75,
681.75, 372, 680.25, 371.25, 678.75, 369, 675.75, 365.25,
671.25, 359.25, 666.75, 349.5, 659.25, 336, 651, 320.25,
642.75, 307.5, 635.25, 291.75, 627.75, 276, 621.75, 252.75,
612, 243.75, 608.25, 236.25, 605.25, 235.5, 603.75, 234,
603.75, 233.25, 603, 233.25, 602.25, 233.25, 602.25, 233.25,
601.5,
],
[
401.25, 718.5, 401.25, 718.5, 401.25, 717, 402, 713.25, 403.5,
709.5, 404.25, 702.75, 405, 693.75, 407.25, 684.75, 408,
672.75, 409.5, 657.75, 409.5, 643.5, 409.5, 631.5, 409.5, 621,
409.5, 612, 408.75, 602.25, 407.25, 597, 406.5, 594.75, 405,
594, 404.25, 593.25, 404.25, 593.25, 403.5, 593.25, 402,
593.25, 401.25, 594.75,
],
[
325.5, 714, 325.5, 714, 327.75, 710.25, 334.5, 699.75, 340.5,
688.5, 348, 673.5, 356.25, 657.75, 366, 641.25, 374.25,
624.75, 383.25, 609, 390, 595.5, 396, 583.5, 402, 575.25, 405,
570, 405.75, 569.25, 406.5, 568.5,
],
[
552.75, 561, 552.75, 561, 550.5, 561.75, 548.25, 563.25,
543.75, 569.25, 536.25, 576.75, 527.25, 590.25, 519, 603.75,
512.25, 615.75, 506.25, 628.5, 501, 640.5, 496.5, 651, 493.5,
661.5, 490.5, 670.5, 488.25, 680.25, 486, 686.25,
],
],
},
width: "1",
},
{
type: "Text",
page: "2",
State: "Unmarked",
StateModel: "Review",
inreplyto: "d8bd0c17-5cd3-4883-388c-2fa2e25d62ef",
flags: "hidden,print,nozoom,norotate",
rect: { x: "0", y: "792", width: "0", height: "792" },
},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{
type: "Ink",
page: "3",
rect: { x: "254.25", y: "735", width: "254.25", height: "735" },
color: "#FF0000",
title: "Guest",
subject: "Ink",
date: "02/27/2024 18:35:09",
flags: "print",
name: "7df914f2-95a7-4ff4-514c-98b23e1e9df2",
rotation: "0",
inklist: { gesture: [[]] },
width: "1",
},
{
type: "Text",
page: "3",
State: "Unmarked",
StateModel: "Review",
inreplyto: "7df914f2-95a7-4ff4-514c-98b23e1e9df2",
flags: "hidden,print,nozoom,norotate",
rect: { x: "0", y: "792", width: "0", height: "792" },
},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{
type: "Ink",
page: "4",
rect: {
x: "355.5",
y: "594.75",
width: "419.25",
height: "695.25",
},
color: "#FF0000",
title: "Guest",
subject: "Ink",
date: "02/27/2024 18:35:17",
flags: "print",
name: "00a91bb6-6ac6-4fdb-fe6c-5f33e9914d69",
rotation: "0",
inklist: {
gesture: [
[
355.5, 695.25, 355.5, 695.25, 358.5, 660, 360, 654, 360.75,
648.75, 360.75, 646.5, 360.75, 643.5, 360.75, 641.25, 362.25,
638.25, 363.75, 634.5, 363.75, 630.75, 363.75, 627.75, 363.75,
626.25, 365.25, 624, 366.75, 618.75, 367.5, 616.5, 368.25,
614.25, 368.25, 612.75, 369, 610.5, 369.75, 609.75, 369.75,
607.5, 369.75, 606, 370.5, 606, 370.5, 605.25, 370.5, 604.5,
371.25, 603, 372, 603, 372, 602.25, 372, 600.75, 372.75, 600,
372.75, 600, 372.75, 598.5, 372.75, 597.75, 372.75, 597,
372.75, 597, 372.75, 596.25, 372.75, 595.5, 372.75, 594.75,
372.75, 594.75, 372.75, 594.75, 373.5, 595.5, 374.25, 597,
375, 597.75, 375.75, 600, 377.25, 600.75, 378, 603, 378.75,
604.5, 379.5, 606, 381, 607.5, 382.5, 610.5, 384, 612.75,
384.75, 615, 386.25, 617.25, 387.75, 618.75, 387.75, 620.25,
388.5, 622.5, 390.75, 626.25, 392.25, 628.5, 393.75, 630.75,
395.25, 632.25, 396.75, 634.5, 397.5, 636.75, 399, 638.25,
399.75, 639.75, 400.5, 640.5, 401.25, 642, 402, 643.5, 402.75,
645, 403.5, 647.25, 404.25, 648, 405.75, 650.25, 405.75, 651,
407.25, 653.25, 408.75, 654, 408.75, 656.25, 409.5, 656.25,
409.5, 657.75, 411, 658.5, 411, 659.25, 411.75, 660, 411.75,
661.5, 412.5, 662.25, 413.25, 663, 414, 664.5, 414.75, 665.25,
414.75, 666.75, 415.5, 668.25, 416.25, 669, 417, 669.75,
417.75, 670.5, 417.75, 671.25, 417.75, 672, 418.5, 672.75,
418.5, 673.5, 418.5, 674.25, 419.25, 674.25, 419.25, 674.25,
419.25, 675, 419.25, 675, 419.25, 675,
],
[419.25, 675, 419.25, 675],
[
355.5, 695.25, 355.5, 695.25, 358.5, 660, 360, 654, 360.75,
648.75, 360.75, 646.5, 360.75, 643.5, 360.75, 641.25, 362.25,
638.25, 363.75, 634.5, 363.75, 630.75, 363.75, 627.75, 363.75,
626.25, 365.25, 624, 366.75, 618.75, 367.5, 616.5, 368.25,
614.25, 368.25, 612.75, 369, 610.5, 369.75, 609.75, 369.75,
607.5, 369.75, 606, 370.5, 606, 370.5, 605.25, 370.5, 604.5,
371.25, 603, 372, 603, 372, 602.25, 372, 600.75, 372.75, 600,
372.75, 600, 372.75, 598.5, 372.75, 597.75, 372.75, 597,
372.75, 597, 372.75, 596.25, 372.75, 595.5, 372.75, 594.75,
372.75, 594.75, 372.75, 594.75, 373.5, 595.5, 374.25, 597,
375, 597.75, 375.75, 600, 377.25, 600.75, 378, 603, 378.75,
604.5, 379.5, 606, 381, 607.5, 382.5, 610.5, 384, 612.75,
384.75, 615, 386.25, 617.25, 387.75, 618.75, 387.75, 620.25,
388.5, 622.5, 390.75, 626.25, 392.25, 628.5, 393.75, 630.75,
395.25, 632.25, 396.75, 634.5, 397.5, 636.75, 399, 638.25,
399.75, 639.75, 400.5, 640.5, 401.25, 642, 402, 643.5, 402.75,
645, 403.5, 647.25, 404.25, 648, 405.75, 650.25, 405.75, 651,
407.25, 653.25, 408.75, 654, 408.75, 656.25, 409.5, 656.25,
409.5, 657.75, 411, 658.5, 411, 659.25, 411.75, 660, 411.75,
661.5, 412.5, 662.25, 413.25, 663, 414, 664.5, 414.75, 665.25,
414.75, 666.75, 415.5, 668.25, 416.25, 669, 417, 669.75,
417.75, 670.5, 417.75, 671.25, 417.75, 672, 418.5, 672.75,
418.5, 673.5, 418.5, 674.25, 419.25, 674.25, 419.25, 674.25,
419.25, 675, 419.25, 675, 419.25, 675,
],
[419.25, 675, 419.25, 675],
],
},
width: "1",
},
{
type: "Text",
page: "4",
State: "Unmarked",
StateModel: "Review",
inreplyto: "00a91bb6-6ac6-4fdb-fe6c-5f33e9914d69",
flags: "hidden,print,nozoom,norotate",
rect: { x: "0", y: "792", width: "0", height: "792" },
},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{
type: "Ink",
page: "35",
rect: {
x: "116.25",
y: "606.75",
width: "338.25",
height: "756.75",
},
color: "#FF0000",
title: "Guest",
subject: "Ink",
date: "02/27/2024 18:35:24",
flags: "print",
name: "94915d23-554e-4809-baf8-56ab4b726866",
rotation: "0",
inklist: {
gesture: [
[338.25, 681.75, 338.25, 681.75],
[338.25, 681.75, 338.25, 681.75],
[
198, 756.75, 198, 756.75, 200.25, 750.75, 200.25, 746.25,
202.5, 738.75, 204.75, 726.75, 207, 713.25, 209.25, 699,
212.25, 685.5, 214.5, 669.75, 216.75, 657, 218.25, 645,
218.25, 636.75, 218.25, 627.75, 218.25, 621.75, 218.25,
615.75, 217.5, 612.75, 215.25, 610.5, 213.75, 609, 212.25,
608.25, 210, 607.5, 206.25, 606.75, 204.75, 606.75, 201,
606.75, 197.25, 607.5, 188.25, 609.75, 179.25, 612.75, 169.5,
618.75, 159, 623.25, 151.5, 627.75, 143.25, 633.75, 134.25,
642, 128.25, 648.75, 123, 654.75, 120, 659.25, 119.25, 663.75,
117, 669.75, 116.25, 674.25, 116.25, 678.75, 117.75, 680.25,
119.25, 681.75, 120, 682.5, 121.5, 683.25, 123, 683.25,
125.25, 683.25, 126.75, 683.25, 129, 681.75, 132.75, 681,
137.25, 678.75, 140.25, 677.25, 144.75, 675.75, 149.25, 673.5,
155.25, 670.5, 161.25, 666, 171.75, 660.75, 179.25, 654.75,
184.5, 651, 188.25, 648, 191.25, 645.75, 191.25, 645, 192,
645,
],
[338.25, 681.75, 338.25, 681.75],
[338.25, 681.75, 338.25, 681.75],
[
198, 756.75, 198, 756.75, 200.25, 750.75, 200.25, 746.25,
202.5, 738.75, 204.75, 726.75, 207, 713.25, 209.25, 699,
212.25, 685.5, 214.5, 669.75, 216.75, 657, 218.25, 645,
218.25, 636.75, 218.25, 627.75, 218.25, 621.75, 218.25,
615.75, 217.5, 612.75, 215.25, 610.5, 213.75, 609, 212.25,
608.25, 210, 607.5, 206.25, 606.75, 204.75, 606.75, 201,
606.75, 197.25, 607.5, 188.25, 609.75, 179.25, 612.75, 169.5,
618.75, 159, 623.25, 151.5, 627.75, 143.25, 633.75, 134.25,
642, 128.25, 648.75, 123, 654.75, 120, 659.25, 119.25, 663.75,
117, 669.75, 116.25, 674.25, 116.25, 678.75, 117.75, 680.25,
119.25, 681.75, 120, 682.5, 121.5, 683.25, 123, 683.25,
125.25, 683.25, 126.75, 683.25, 129, 681.75, 132.75, 681,
137.25, 678.75, 140.25, 677.25, 144.75, 675.75, 149.25, 673.5,
155.25, 670.5, 161.25, 666, 171.75, 660.75, 179.25, 654.75,
184.5, 651, 188.25, 648, 191.25, 645.75, 191.25, 645, 192,
645,
],
],
},
width: "1",
},
{
type: "Text",
page: "35",
State: "Unmarked",
StateModel: "Review",
inreplyto: "94915d23-554e-4809-baf8-56ab4b726866",
flags: "hidden,print,nozoom,norotate",
rect: { x: "0", y: "792", width: "0", height: "792" },
},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
],
},
},
};
const onDocumentLoad = (args: any) => {
console.log(args);
const viewer = document.getElementById("container").ej2_instances[0];
viewer.importAnnotation(data);
};

const handleSave = async () => {
console.log("handleSave")
const viewer = document.getElementById("container").ej2_instances[0];
viewer.exportAnnotationsAsObject().then(function(value) {
console.log(value)
})
};

return (
<div className="control-section">
{typeof window !== "undefined" && isClient ? (
<>
<PdfViewerComponent
documentLoad={onDocumentLoad}
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
id="container"
serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
style={{ height: "640px" }}
>
<Inject services={[Toolbar, Annotation, LinkAnnotation]} />
</PdfViewerComponent>
<button
onClick={handleSave}
>
Save
</button>
</>
) : null}
</div>
);
}

export default App;




1 Reply

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team March 1, 2024 12:16 PM UTC

Hi Nayan,


We were able to get the annotation data while exporting the annotations using exportAnnotationASObject method. We have provided the code snippet, sample and video recording below for your reference.


Code snippet:


let exportObject;

 

const exportAnnotationAsObject = () => {

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

        exportObject = value;

        console.log(exportObject);

    });

};

 

const importAnnotation = () => {

    viewer.importAnnotation(JSON.parse(exportObject));

};


Sample:  https://stackblitz.com/edit/github-hslfxx-htzvkd?file=pages%2Findex.tsx


Documentation: https://ej2.syncfusion.com/react/documentation/pdfviewer/how-to/import-export-annotation-object


Video:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ExportAndImportAnnotVideo-453841053.zip


Please test the sample on your end and inform us if you encounter any concerns. If you have identified any problems, kindly provide a modified sample, relevant code snippets, and a video recording demonstrating the reported issue. These details will assist us in further analysis and providing appropriate assistance.


Loader.
Up arrow icon