As a Node.js developer, you can easily annotate any of your PDF documents programmatically on the cloud. You can add images, comments, notes, or other types of external remarks to the document as annotations. In this article, you will learn how to annotate PDF documents using a REST API in Node.js.
The following topics shall be covered in this article:
- Document Annotation REST API and Node.js SDK
- Annotate PDF Documents using a REST API in Node.js
- Add Image Annotations using Node.js
Document Annotation REST API and Node.js SDK
For annotating PDF documents, I will be using the Node.js SDK of GroupDocs.Annotation Cloud API. It allows you to programmatically build document annotation tools online. You can add annotations, watermark overlays, text replacements, redactions, and text markups to the supported document formats. It also provides .NET, Java, PHP, Ruby, and Python SDKs as its document annotation family members for the Cloud API.
You can install GroupDocs.Annotation Cloud to your Node.js application using the following command in the console:
npm install groupdocs-annotation-cloud
Please get your Client ID and Client Secret from the dashboard before you start following the steps and available code examples. Once you have your ID and secret, add in the code as shown below:
global.clientId = "659fe7da-715b-4744-a0f7-cf469a392b73"; // Get ClientId and ClientSecret from https://dashboard.groupdocs.cloud
global.clientSecret = "b377c36cfa28fa69960ebac6b6e36421"; // Get ClientId and ClientSecret from https://dashboard.groupdocs.cloud
global.myStorage = "";
const configuration = new groupdocs_annotation_cloud.Configuration(clientId, clientSecret);
configuration.apiBaseUrl = "https://api.groupdocs.cloud";
Annotate PDF Documents using a REST API in Node.js
You can annotate your PDF documents on the cloud by following the simple steps given below:
- Upload the PDF file to the Cloud
- Annotate PDF Document using Node.js
- Download the annotated file
Upload the Document
Firstly, upload the PDF file to the Cloud using the following code sample:
// initialize api
var fileApi = new groupdocs_annotation_cloud.FileApi(configuration);
// Open file in IOStream from local/disc.
var resourcesFolder = 'C:\\Files\\sample.pdf';
// read file
fs.readFile(resourcesFolder, (err, fileStream) => {
// create upload file request
var request = new groupdocs_annotation_cloud.UploadFileRequest("sample.pdf", fileStream, myStorage);
// upload file
fileApi.uploadFile(request)
});
As a result, the uploaded PDF file will be available in the files section of your dashboard on the cloud.
Annotate PDF Document using Node.js
You can add multiple annotations to the PDF document programmatically by following the steps mentioned below:
- Create an instance of the AnnotateApi
- Create the first instance of the AnnotationInfo
- Set annotation properties for the first instance e.g. position, type, text, etc.
- Create second instance of the AnnotationInfo
- Set annotation properties for the second instance e.g. position, type, text, etc.
- Create third instance of the AnnotationInfo
- Set annotation properties for the third instance e.g. position, type, text, etc.
- Create fourth instance of the AnnotationInfo
- Set annotation properties for the fourth instance e.g. position, type, text, etc.
- Create a FileInfo instance and set the input file path
- Create an instance of the AnnotateOptions
- Assign the FileInfo and defined annotation instances to the AnnotateOptions
- Set the output file path
- Create a request by calling the AnnotateRequest method with AnnotateOptions
- Get results by calling the AnnotateApi.annotate() method with AnnotateRequest
The following code sample shows how to annotate a PDF document with multiple annotations using a REST API in Node.js.
// initialize api
let annotateApi = groupdocs_annotation_cloud.AnnotateApi.fromKeys(clientId, clientSecret);
// distance annotation
let a1 = new groupdocs_annotation_cloud.AnnotationInfo();
a1.annotationPosition = new groupdocs_annotation_cloud.Point();
a1.annotationPosition.x = 1;
a1.annotationPosition.y = 1;
a1.box = new groupdocs_annotation_cloud.Rectangle();
a1.box.x = 100
a1.box.y = 100
a1.box.width = 200
a1.box.height = 100
a1.pageNumber = 0
a1.penColor = 1201033
a1.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a1.penWidth = 3
a1.opacity = 1
a1.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Distance;
a1.text = "This is distance annotation";
a1.creatorName = "Anonym A.";
// area annotation
let a2 = new groupdocs_annotation_cloud.AnnotationInfo();
a2.annotationPosition = new groupdocs_annotation_cloud.Point();
a2.annotationPosition.x = 1;
a2.annotationPosition.y = 1;
a2.box = new groupdocs_annotation_cloud.Rectangle();
a2.box.x = 80
a2.box.y = 400
a2.box.width = 200
a2.box.height = 100
a2.penColor = 1201033;
a2.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a2.pageNumber = 0;
a2.penWidth = 3;
a2.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Area;
a2.text = "This is area annotation";
a2.creatorName = "Anonym A.";
// text field annotation
let a3 = new groupdocs_annotation_cloud.AnnotationInfo();
a3.annotationPosition = new groupdocs_annotation_cloud.Point();
a3.annotationPosition.x = 100;
a3.annotationPosition.y = 100;
a3.box = new groupdocs_annotation_cloud.Rectangle();
a3.box.x = 450
a3.box.y = 150
a3.box.width = 100
a3.box.height = 30
a3.pageNumber = 0;
a3.fontColor = 65535;
a3.fontSize = 16;
a3.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.TextField;
a3.text = "Text field text";
a3.creatorName = "Anonym A.";
// ellipse annotation
let a4 = new groupdocs_annotation_cloud.AnnotationInfo();
a4.annotationPosition = new groupdocs_annotation_cloud.Point();
a4.annotationPosition.x = 1;
a4.annotationPosition.y = 1;
a4.box = new groupdocs_annotation_cloud.Rectangle();
a4.box.x = 350;
a4.box.y = 350;
a4.box.width = 200;
a4.box.height = 100;
a4.pageNumber = 0;
a4.penColor = 1201033;
a4.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a4.penWidth = 4;
a4.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Ellipse;
a4.text = "This is ellipse annotation";
a4.creatorName = "Anonym A.";
let fileInfo = new groupdocs_annotation_cloud.FileInfo();
fileInfo.filePath = "sample.pdf";
let options = new groupdocs_annotation_cloud.AnnotateOptions();
options.fileInfo = fileInfo;
options.annotations = [a1, a2, a3, a4];
options.outputPath = "Output/output.pdf";
// create annotation request
let request = new groupdocs_annotation_cloud.AnnotateRequest(options);
// annotate
let result = await annotateApi.annotate(request);
console.log("Multiple Annotations added: " + result.href);
Annotate PDF Documents using a REST API in Node.js
You can read more about supported annotation types under adding annotations section in the documentation.
Download the Annotated File
The above code sample will save the annotated PDF file on the cloud. You can download it using the following code sample:
// construct FileApi
var fileApi = new groupdocs_annotation_cloud.FileApi(configuration);
// create download file request
let request = new groupdocs_annotation_cloud.DownloadFileRequest("Output/output.pdf", myStorage);
// download file
let response = await fileApi.downloadFile(request);
// save file in working directory
fs.writeFile("C:\\Files\\output.pdf", response, "binary", function (err) { });
console.log(response);
Add Image Annotations using Node.js
You can add image annotations in your PDF documents programmatically by following the steps given below:
- Create an instance of the AnnotateApi
- Create an instance of the AnnotationInfo
- Define a rectangle and set its position, height, and width
- Set annotation properties e.g. position, text, height, width, etc.
- Set the annotation type as Image
- Create a FileInfo instance and set the input file path
- Create an instance of the AnnotateOptions
- Assign the FileInfo and annotation to the AnnotateOptions
- Set the output file path
- Create a request by calling the AnnotateRequest method with AnnotateOptions
- Get results by calling the AnnotateApi.annotate() method with AnnotateRequest
The following code sample shows how to add image annotations in the PDF document using a REST API in Node.js. Please follow the steps mentioned earlier to upload and download a file.
// initialize api
let annotateApi = groupdocs_annotation_cloud.AnnotateApi.fromKeys(clientId, clientSecret);
// image annotation
let a1 = new groupdocs_annotation_cloud.AnnotationInfo();
a1.annotationPosition = new groupdocs_annotation_cloud.Point();
a1.annotationPosition.x = 1;
a1.annotationPosition.y = 1;
a1.box = new groupdocs_annotation_cloud.Rectangle();
a1.box.x = 300;
a1.box.y = 160;
a1.box.width = 200;
a1.box.height = 40;
a1.pageNumber = 0;
a1.penColor = 1201033;
a1.penStyle = groupdocs_annotation_cloud.AnnotationInfo.PenStyleEnum.Solid;
a1.penWidth = 1;
a1.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.Image;
a1.text = "This is image annotation";
a1.creatorName = "Anonym A.";
a1.imagePath = "JohnSmith.png";
// input file path
let fileInfo = new groupdocs_annotation_cloud.FileInfo();
fileInfo.filePath = "sample.pdf";
// define annotation options
let options = new groupdocs_annotation_cloud.AnnotateOptions();
options.fileInfo = fileInfo;
options.annotations = [a1];
options.outputPath = "Output/output.pdf";
// create annotate request
let request = new groupdocs_annotation_cloud.AnnotateRequest(options);
// annotate
let result = await annotateApi.annotate(request);
console.log("Image Annotation added: " + result.href);
Add Image Annotations using Node.js
Try Online
Please try the following free online PDF annotation tool, which is developed using the above API. https://products.groupdocs.app/annotation/pdf
Conclusion
In this article, you have learned how to add multiple annotations to PDF documents on the cloud. You have also learned how to add image annotations to PDF documents programmatically. Moreover, you have learned how to programmatically upload a PDF file on the cloud and then download the annotated file from the cloud. You can learn more about GroupDocs.Annotation Cloud API using the documentation. We also provide an API Reference section that lets you visualize and interact with our APIs directly through the browser. In case of any ambiguity, please feel free to contact us on the forum.