# How can restore the area measurement (rectangle) which i took after page refresh

**URL:** https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922
**Category:** Technical Support
**Created:** [November 2, 2023, 7:51am UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922 "2023-11-02T07:51:42Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)
#### Post date: [November 2, 2023, 7:51am UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/1 "2023-11-02T07:51:42Z")

</div>

**Which product are you using?**

PDF.js Express Plus

**PDF.js Express Version**

**Detailed description of issue**  
I set my scale and took some area measurements using circle and rectangle. I can see the measurements under comments. Is there a way to plot those area back in the pdf with those measurements (It got vanished when I refreshed the page). So I would like to know how can place those area back if i store those measurements

**Expected behaviour**  
{Provide a screenshot or description of the expected behaviour}

**Does your issue happen with every document, or just one?**  
{Answer here}

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
{Provide a relevant code snippet}

---

<div class="post-metadata">

### Author: ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)
#### Post date: [November 2, 2023, 6:25pm UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/2 "2023-11-02T18:25:51Z")

</div>

Hi there,

Thanks for contacting pdf.js express forums,

You mentioned that the measurements vanish when refreshing the page, how are you saving the measurement annotations?  
Can you share a screenshot of the expected result and the actual result?  
Are you on the latest version 8.7.4?

Best regards,  
Kevin Kim

---

<div class="post-metadata">

### Author: ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)
#### Post date: [November 2, 2023, 7:14pm UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/3 "2023-11-02T19:14:35Z")

</div>

I just started with measurements demo (manual installation) under advanced section. I am trying to integrate the same on our web app.

What i tried I installed the demo and I wanted to how can i get the taken measurements into my web app. Once i am able to fetch those area measurements I will be able to store in database.

Also I wanted to know how can pass the stored measurements back on the pdf when I need to edit it

Thanks

---

<div class="post-metadata">

### Author: ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)
#### Post date: [November 2, 2023, 7:28pm UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/4 "2023-11-02T19:28:39Z")

</div>

Any help would be really appreciated

I need to get marked areas and should be able to pass it to my webapp. Then later i need to take those measurements from db and plot it on the pdf again

---

<div class="post-metadata">

### Author: ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)
#### Post date: [November 2, 2023, 8:39pm UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/5 "2023-11-02T20:39:44Z")

</div>

Hi there,

So for saving the annotation data, you can call exportAnnotations:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/0/09c24fb7ac260927cc9d33d07d99371fe1827fb8.jpeg)

And for importing it back into the PDF, you can call importAnnotations:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/f/f2acb4b6a087b5fe949b48633171d2b9396d675c.jpeg)

So in your case, you would be saving the XFDF data into your database and then calling it back when you load your document.

Best regards,  
Kevin Kim

---

<div class="post-metadata">

### Author: ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)
#### Post date: [November 3, 2023, 7:52am UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/6 "2023-11-03T07:52:01Z")

</div>

Should I use realtime collaboration with APIs to achieve this?

---

<div class="post-metadata">

### Author: ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)
#### Post date: [November 3, 2023, 8:09am UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/7 "2023-11-03T08:09:31Z")

</div>

We wanted to integrate the pdf measurements facility within our application (web app). so that users can upload files and take measurements.

We need to get each measurement once user mark it. If i can get it in JS or some other way I can pass it to our database. Also we can fetch those measurements from db and plot it on PDF when user open it again

So I need to know the ways to get those measurements when user mark it. Also methods to plot it back on pdf when user come back

Thanks

---

<div class="post-metadata">

### Author: ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)
#### Post date: [November 3, 2023, 2:58pm UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/8 "2023-11-03T14:58:39Z")

</div>

Hi there,

If multiple users need to see the changes as another user makes changes, then you would use realtime collaboration.  
You can see the use-cases for realtime collaboration is used for here:

> **[PDF.js Express Real-Time Collaboration | Documentation](https://pdfjs.express/documentation/collaboration/overview)**

And a sample of realtime collaboration:  
[https://pdfjs.express/samples/annotation/realtime-collaboration/](https://pdfjs.express/samples/annotation/realtime-collaboration/)

If you just need to take in the XFDF when a user creates a measurement annotation, then you can use the annotationChanged event and then call exportAnnotations as shown above:

> **[Add Events to Annotations with PDF.js Express | Documentation](https://pdfjs.express/documentation/annotation/annotation-events.8)**

Best regards,  
Kevin Kim

---

<div class="post-metadata">

### Author: ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://pdfjs.community/u/sachin)
#### Post date: [November 3, 2023, 4:25pm UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/9 "2023-11-03T16:25:13Z")

</div>

Single user will be doing it

I need to provide an option for users upload their pdf files and mark measurements. Each measurement area/perimeter need to pass it to backend. I am stuck here actually as I am not getting measurement values anywhere (Only i can see it as comment)

Also I need to plot the stored values back on PDF when user option it again

Hope its clear now

---

<div class="post-metadata">

### Author: ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)
#### Post date: [November 3, 2023, 7:45pm UTC](https://pdfjs.community/t/how-can-restore-the-area-measurement-rectangle-which-i-took-after-page-refresh/2922/10 "2023-11-03T19:45:57Z")

</div>

Hi there,

Could you please share code snippets and screenshots/video of what you tried and what is not working?

Best regards,  
Kevin Kim
