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

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}

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

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


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

Hi there,

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

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

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

Should I use realtime collaboration with APIs to achieve this?

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


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:

And a sample of 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:

Best regards,
Kevin Kim

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

Hi there,

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

Best regards,
Kevin Kim