Saving PDF Annotations, Creating Annotations in React JavaScript - PDFTron WebViewer Series

in this video we're going to go ahead and cover how to handle annotation data inside of a pdf we'll go over the typical ways the annotation data usually stored inside of a pdf document and discuss some of the best practices in terms of how to save them so if you haven't kind of set up or watch the previous introduction to this series go ahead and watch it now to help set up the project and get started once you set up the project i'll see you back here and we'll jump in here i have the pdf from web here in front of me and we loaded some of that notation data inside of it so let's actually pop open vs code i'm just going to kind of walk you through what's happening here so inside of a use effect that gets executed once because we're not passing anything to the dependency array we're setting up our webviewer we're calling the webviewer function passing it in options object configuration where we pointing it towards a path that we're kind of hosting webviewer lib with all this kind of workers and all the necessary uh dependencies that it needs and then we're loading up an initial document coming from files where we're serving up static resources here pdftron about and after that we're also kind of saying it and giving it a reference to the current viewer element that is our div tag right here after that it returns as a promise with an instant object from that instance object we can deconstruct the number of different objects that we're going to be working with as such one of them is doc viewer doc viewer allows us to listen for some of the events uh for example like document loaded so as soon as document voted we can go ahead and start interacting and programmatically uh creating some of the annotations so in this example we're actually creating a new rectangle annotation on a page number one and then we're providing it x and y position of uh on the page coordinate that it should appear the width and height and as well as the author after that we're adding it to the annotation manager and then redrawing it on the screen and that's exactly what we observed kind of happening here and we have it drawn programmatically nice so now what i can do is actually let's go ahead and change the author name uh on this rectangle because right now it shows up as guest but what i want to do is actually show it as my name uh so to do that i'm just gonna go ahead and i will set the current user so what we can do is inside of document loaded we can just say annotation set current user and set it to andre okay and now it should reload and we should go ahead and get the rectangle and now it shows up as andre and any kind of subsequent annotations that i'm going to be making is going to go ahead and create them um with my username set to andre as well here okay perfect so this is how we can create different annotations uh and allow users to create annotations through the ui so maybe our users are kind of collaborating uh placing the different annotations and now comes the point where we actually want to go ahead and save our annotation data so what are some of the options to handle and save the annotation data so the best place for that head on over to pdftron.com and go into documentation and then you can just kind of get in here and go to the annotation group and inside of the annotation group really helpful guide is import export so inside of here and let's go ahead and make this bigger the way the annotations are handled inside of the webviewer is that they overlaid as a layer on top of a pdf document so now this is something you've seen with kind of the highlights and rectangle it's drawn on a separate layer on a canvas now there's a couple options that we can kind of save the annotations so the way the annotation standard or kind of format that it handles is called xfdf which is just an xml based string now this is the same xml based string as you know something that adobe reader can interpret open and our annotation data is going to be one to one so one way we can do we can save off the file separately and just go ahead and kind of put it inside of our you know file storage alongside with file maybe implement some kind of naming convention to kind of say okay this file has this annotation data it's not my favorite approach another way we can go ahead and merge the annotation data directly into the pdf and this is something that is kind of done on the default download action so if we kind of go ahead and download the pdf it actually kind of merges the annotation data together with the pdf now this does increase the pdf file size it makes it a little bit harder to version it properly but again it's useful in scenarios where we do want the users to download the file maybe email it out or open it up on their local desktop if they have to send it out now the one other option that's probably my most favorite one is to go ahead and save it as a role inside of a database so what we can do is we can export the annotation data and then after that we can save it specifically for you know the set of users or that specific user and this way we can store only a single instance of a pdf document inside of our kind of file storage and then create multiple database entries for every user for their annotation data and every time they kind of come in and go ahead and edit or change the document we can kind of properly version that so let's go ahead and kind of try to export annotations and see how it looks like so to save them off we can just go ahead and export annotations uh simply by calling uh and not manager.export annotations and we don't need to export any of the links or widgets just simply any of the annotations that user has made let's go ahead and kind of take a look how that looks so inside of the document loaded we can go ahead um create the annotation programmatically and then we can just get the annotation manager to export the annotations and this is the promise that's being returned so we just got to make sure we have waited and as soon as we do that we got to declare this function as async and what i'm going to do next i just want to kind of console.log it and see how it looks okay great so let's go ahead and refresh and perfect so as we can see here we have copy or we have console logged our kind of the annotation um xfdf xml string out of it so let's get back to vs code create new file and kind of take a look what's actually inside of it so i just quickly format it here and let's take a look what's inside of it so inside of it we have the xfdf um and we have our annotations and inside of the annotations we have the square annotations as you can see that when we're creating programmatically we're kind of specifying the kind of the x and y width and height of it the kind of the title of it so kind of the author and who created it and then we have it imported exported here now the next step what i want to do is okay great i can console log it and at this point you can probably create a post request but let's go ahead and add a button to the kind of webviewer ui to handle the annotation save and kind of getting that string every time somebody hits a button so to do that i get back to my favorite documentation here and go into the header and i go ahead and go to the adding custom save button so now what i can do is i can set a new header button and place an on click i'm going to go ahead and kind of console out and print out that xml string so let's get back to the app.js and inside of here maybe the first thing that i actually want to do is kind of set the header items and inside of here we can actually just go ahead and kind of console.log the annotations and again don't forget to make this async on click we can remove async from here okay great so let's reload and kind of see what happens now okay great so now we have this beautiful save button and every time i click it it will go ahead and kind of print out that xml string so again it's pretty handy and that can actually kind of fit into more real-life workflow where you know the user can kind of go ahead create the annotation data maybe place a comment and say comment here save it they can also create a highlight maybe and after that they're like you know what i'm done with this document i can go ahead hit the save button and you can see now our xml string is growing and we can save it off now that's just one of the ways to do it we can also kind of implement autosave functionality for the user every time you know the annotation event kind of changes or updates uh something happens and we can kind of go ahead and save that off so to do that under annotations we can go ahead check out the events and triggers so every time uh the annotation has changed we can listen for that and then execute our kind of uh callback function that we provide and inside of it we have different actions for adding modifying deleting and then we can also kind of loop through every single annotation so if you want to implement how to save functionality instead of introducing uh kind of set header items and adding new save button you can just kind of set up an event listener on the annotation change quantum log out uh every time there is annotation change we can go ahead export annotations um so let's go ahead and refresh and perfect so now we're gonna go ahead and add a new comment and as you can see here every time we kind of create a new annotation it just exports us the new annotation xml string so every time i create the highlight the string is getting bigger and bigger now to reduce the network payload at this point and ensure that the post requested the database quite small we can actually implement something else and instead of kind of calling export annotations every time we can simply call a different command that comes in quite handy specifically for this use case and it's called get annot command so get anode command will just give us the shorter version of all the annotations that have been added deleted removed or changed so let's go ahead and take a look what that looks like instead okay so as you can see here the xml structure um it looks something like this so this is just coming from our initial uh load and programmatically drawing of the annotations as well as creating any other links so here we have an ad for a square um now we're going to go ahead and create the highlight and as we can see that we have just an ad for the highlight so the payload size roughly is going to stay the same and it's quite small so let's go ahead and kind of change the comment place comment here save it and as you can see we have added it and modified uh that specific annotation at this point um so this is perfect for kind of creating real-time collaboration and ensuring the payload size is pretty small so now we can kind of synchronize this across multiple users i hope you enjoyed this video thanks so much for watching

Channel: Apryse

Views: 12,246

Keywords: pdf annotation, xfdf annotation save, save xfdf javascript, save pdf react, save annotations, save pdf markup, create annotation in javascript

Id: XalO08f8LfY

Length: 12min 21sec (741 seconds)

Published: Tue Mar 09 2021