Hi,
This is great plugin indeed, i was able to annotate and save the PDF along with annotations, however i have a use case to also get the PDF with annotation data in Binary / Base64 based to store the annotation data on the database, because there wasn't such a function, i tried to tweak viewer.js, i was able to get the PDF data on base 64, but not along with the annotation, the data where i get the PDF is from a download() function, since the code is really long, i wanna ask is that possible to get the PDF with annotation data, also i have use case to get the annotation data along with where it's located (e.g page 1,3,etc)Thanks in advance
Hey @Hengki Pranoto,Just to let you know that 2 new client actions are now available in the new version of the component.
They are:
This action will return the loaded document in a Base64 format, including all the annotations.
This action will return all the annotations present in the document as a List.This includes the position coordinates in the page, the page number, the text content, styling and etc.
Here is an example of an annotation item:
Object:
{
"annotationFlags": 24,
"borderStyle": {
"width": 1,
"style": 1,
"dashArray": [3]
},
"color": {},
"contentsObj": {
"str": "Test Content",
"dir": "ltr"
"id": "998R",
"modificationDate": "D:20230309185452",
"rect": [136.52307692307693, 705.9538461538463, 158.52307692307693, 727.9538461538463],
"subtype": "Text",
"titleObj": {
"str": "Test Author",
"annotationType": 1,
"name": "Note",
"page": 1,
"quadPoints": []
}Let me know if it is not what you were after!
Best Regards,
RR :)
Hey @Hengki Pranoto,
Can you let me know if this last version solved your issues?
Hey @Hengki Pranoto ,
Thank you for your feedback and sorry for the late reply.
To download the file with the annotation you could use the save button that is available with the component by default:
Have you tried this one?
You should get something like this:
If you need to download it programatically, without clicking the button.
What you can try as well is to use the following Javascript:
localPDFViewer.downloadOrSave()
This will open the chrome download window.
Let me know if this is what you are looking for.
Hi @Raphael RanieriThanks for the feedback,
I am well aware of the download icon right there it works well to my use case, but what i am looking for is another use case i have which is to store the PDF along with the annotation as base64 / binary data to the database (i still can't find how i can get the PDF data), also if possible, i want to get annotation info on where is located (which page).Best Regards,Hengki Pranoto
The PDF the component uses is normally an URL to a file or the file itself.With this in mind, ideally you should already have access to this file to download and manipulate it the way you want.
Anyway, if you need to get the loaded file in base64, you could use a Javascript like this:
// get PDF data from viewer
var pdfData = await localPDFViewer.pdfDocument.saveDocument();
// transform data to a blob that could be downloaded
var blob = new Blob([pdfData], { type: "application/pdf" });
//if you need it in base64 you can convert it like this:
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
//log it on console ir do something else with the data
console.log(base64data);
}
As for the annotations position...This is something that is included in the file itself as well, and as the viewer doesn't edit it yet, it doesn't store this content in an easy way.However, you can get the annotations position coordinates and info, by iterating all the pages in the file using the viewer. This is an example:
//Total number of pages the file has
var pageCount = localPDFViewer.pagesCount;
//Temp position
var position = 0;
//Iterate all pages
while (position < pageCount) {
position=position+1;
// get the page object
var page = await localPDFViewer.pdfDocument.getPage(position);
// get page annotations
var pageAnnotations = await page.getAnnotations();
// print object in console or do something else
console.log(pageAnnotations);
it will return an array of objects with the following info:
I will try to implement something better in the future...But out of the box, this was the best I could find to help you in this use case.Let me know if it helps,Best RegardsRR :)
Hey @Raphael Ranieri Sorry for late reply, haven't check this for a whileYep, it works like a charm, thanks a lot :)Best Regards,Hengki
@Raphael Ranieri Hey bro, being wondering, how do you use PDF JS + Annotations (O11) on a normal code, I have downloaded it and got a .oap file. I’ve been working on a project where I need to save a PDF file after annotations have been added using PDF.js. Is it possible to save a PDF file with annotations using PDF.js? If so, could you kindly provide a small demo or guide on the method you used to achieve this? Any tips, best practices, or code snippets would be greatly appreciated.